CODEWITHSUNDEEP
javascripthtmlajaxjquery
PPS
PPS

Reputation: 552

Using Jquery AJAX function with datatype HTML

We have a complete code for getting the values from PHP through Jquery AJAX with JSON datatype. Here are the codes.

HTML CODE

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax submit</title>
    <link href="css/main.css" type="text/css" media="screen, projection"rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <div id="message" style="display: none;">
        </div>
        <div id="waiting" style="display: none;">
            Please wait<br />
            <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
        </div>
        <form action="" id="demoForm" method="post">
            <fieldset>
                <legend>Demo form</legend>
                <span style="font-size: 0.9em;">TEST by ROD</span>
                <p>
                    <label for="email">E-Mail:</label>
                    <input type="text" name="email" id="email" value="" />
                </p>
                <p>
                    <input type="submit" name="submit" id="submit" style="float: right; clear: both; margin-right: 3px;" value="Submit" />
                </p>
            </fieldset>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/ajaxSubmit.js"></script>
</body>
</html>

PHP CODE

sleep(3);

if (empty($_POST['email'])) {
    $return['error'] = true;
    $return['msg'] = 'You did not enter you email.';
}
else {
    $return['error'] = false;
    $return['msg'] = 'You\'ve entered: ' . $_POST['email'] . '.';
}

echo json_encode($return);

JS CODE

$(document).ready(function(){
$('#submit').click(function() {

    $('#waiting').show(500);
    $('#demoForm').hide(0);
    $('#message').hide(0);

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        data: {
            email : $('#email').val()
        },
        success : function(data){
            $('#waiting').hide(500);
            $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
                .text(data.msg).show(500);
            if (data.error === true)
                $('#demoForm').show(500);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            $('#waiting').hide(500);
            $('#message').removeClass().addClass('error')
                .text('There was an error.').show(500);
            $('#demoForm').show(500);
        }
    });

    return false;
});
  });

I just want to Move this code to HTML format, actually above these codes are made by internet user. due to my limited knowledge in AJAX/JS . we are unable to make it AJAX with HTML datatype.

The whole programme is good and according to our need. At the moment we just want to DISABLE the JSON and ENABLE HTML DATATYPE.

Upvotes: 7

Views: 134191

Answers (2)

frank
frank

Reputation: 41

var datos = $("#id_formulario").serialize();
$.ajax({         
    url: "url.php",      
    type: "POST",                   
    dataType: "html",                 
    data: datos,                 
    success: function (prueba) { 
        alert("funciona!");
    }//FIN SUCCES

});//FIN  AJAX

Upvotes: 4

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41895

Here is a version that uses dataType html, but this is far less explicit, because i am returning an empty string to indicate an error.

Ajax call:

$.ajax({
  type : 'POST',
  url : 'post.php',
  dataType : 'html',
  data: {
      email : $('#email').val()
  },
  success : function(data){
      $('#waiting').hide(500);
      $('#message').removeClass().addClass((data == '') ? 'error' : 'success')
     .html(data).show(500);
      if (data == '') {
          $('#message').html("Format your email correcly");
          $('#demoForm').show(500);
      }
  },
  error : function(XMLHttpRequest, textStatus, errorThrown) {
      $('#waiting').hide(500);
      $('#message').removeClass().addClass('error')
      .text('There was an error.').show(500);
      $('#demoForm').show(500);
  }

});

post.php

<?php
sleep(1);

function processEmail($email) {
    if (preg_match("#^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$#", $email)) {
        // your logic here (ex: add into database)
        return true;
    }
    return false;
}

if (processEmail($_POST['email'])) {
    echo "<span>Your email is <strong>{$_POST['email']}</strong></span>";
}

Upvotes: 18

Related Questions