Geek Answers Handbook

Using jQuery AJAX Function with HTML Data Type

We have complete code to get values ​​from PHP through jQuery AJAX with JSON data type. 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, in fact, an Internet user is created above these codes. due to my limited knowledge in AJAX / JS. we cannot do this AJAX with an HTML data type.

The whole program is good and meets our needs. For now, we just want to disable JSON and ENABLE HTML DATATYPE.

+4
source share
2 answers

Here is the version that uses dataType html, but it is much 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>"; }
+9
source 
 var datos = $("#id_formulario").serialize(); $.ajax({ url: "url.php", type: "POST", dataType: "html", data: datos, success: function (prueba) { alert("funciona!"); }//FIN SUCCES });//FIN AJAX
+1
source

More articles:


All Articles