Using Jquery AJAX function with datatype HTML

Question

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.

You question doesn't make any sense. What do you mean disable the json? You want to return html directly from your php instead of json? — Richard Dalton
– Richard Dalton, Commented Oct 12, 2011 at 11:17
I don't see any reason for not using json. Why you don't want to use json ? — Benjamin Crouzier
– Benjamin Crouzier, Commented Oct 12, 2011 at 11:20
when i delete the the JSON code from JS script. we are getting error i edit the code with this line $.ajax({ type : 'POST', url : 'post.php', dataType : 'html',..................... — PPS
– PPS, Commented Oct 12, 2011 at 11:21
but i dont know the exactly code for write the data from php into html using this script — PPS
– PPS, Commented Oct 12, 2011 at 11:22
my data are in tabular form, from PHP. this file is not mine. i just want to modify it according to my need. this is perfecr when our data in array format. — PPS
– PPS, Commented Oct 12, 2011 at 11:26

Benjamin Crouzier · Accepted Answer · 2011-10-12 12:16:26Z

18

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>";
}

edited Oct 12, 2011 at 12:16

answered Oct 12, 2011 at 11:36

Benjamin Crouzier

42.2k48 gold badges179 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PPS Over a year ago

dont know rest of the code for Ajax Call. which you have mentioned above. And please confirm that rest of the files are remain same ?

Benjamin Crouzier Over a year ago

Yes, everything else is the same, and you can replace all the code for post.php with what I suggested.

PPS Over a year ago

And what about the AJAX CALL :- after $('#demoForm').show(500); } }, ... there is having more codes ?

Benjamin Crouzier Over a year ago

It is unchanged. Updated my answer.

Victor · Accepted Answer · 2013-09-11 22:36:50Z

4

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

});//FIN  AJAX

edited Sep 11, 2013 at 22:36

Victor

22.4k15 gold badges101 silver badges115 bronze badges

answered Sep 11, 2013 at 22:14

frank

411 bronze badge

Collectives™ on Stack Overflow

Using Jquery AJAX function with datatype HTML

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related