Today I'm gonna give you some code examples on how you can post a form and json data using jQuery AJAX. A PHP file will receive the posted data and print the response.
I think this is one of the most useful code when you're coding with jQuery, especially if you're building a web app with modules that deals with so many forms or post request in one page.
Why use jQuery for AJAX requests?
I think it is to make things easier, have shorter more readable code. You can see some code examples of doing an AJAX request without jQuery here and here.
As you can see on those links, some tasks include creating a catch for different browser XMLHttpRequest, opening the url, checking if the request is in ready state and setting the request header.
jQuery solves this by having a short, more readable syntax.
Let's code!
Alright, now we'll get straight to the code examples. We're gonna have three example below, continue to read!
1. jQuery post form data using .ajax() method
This is a great way to show someone that you are now an AJAX programmer. Because of this .ajax() piece of code in your HTML page, you may now face the world with confidence and with a beautiful smile in your face.
Just kidding. But seriously, this piece of code is useful.
<html> <head> <title>jQuery post form data using .ajax() method by codeofaninja.com</title> </head> <body> <h1>jQuery post form data using .ajax() method</h1> <div>Fill out and submit the form below to get response.</div> <!-- our form --> <form id='userForm'> <div><input type='text' name='firstname' placeholder='Firstname' /></div> <div><input type='text' name='lastname' placeholder='Lastname' /></div> <div><input type='text' name='email' placeholder='Email' /></div> <div><input type='submit' value='Submit' /></div> </form> <!-- where the response will be displayed --> <div id='response'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <script> $(document).ready(function(){ $('#userForm').submit(function(){ // show that something is loading $('#response').html("<b>Loading response...</b>"); /* * 'post_receiver.php' - where you will pass the form data * $(this).serialize() - to easily read form data * function(data){... - data contains the response from post_receiver.php */ $.ajax({ type: 'POST', url: 'post_receiver.php', data: $(this).serialize() }) .done(function(data){ // show the response $('#response').html(data); }) .fail(function() { // just in case posting your form failed alert( "Posting failed." ); }); // to prevent refreshing the whole page page return false; }); }); </script> </body> </html>
LIVE DEMO
2. jQuery post form data using .post() method
.post() method has a more descriptive syntax, it is a shorthand of .ajax() method above. See how it was commonly used with the code below:
<html> <head> <title>jQuery post form data using .post() method by codeofaninja.com</title> </head> <body> <h1>jQuery post form data using .post() method</h1> <div>Fill out and submit the form below to get response.</div> <!-- our form --> <form id='userForm'> <div><input type='text' name='firstname' placeholder='Firstname' /></div> <div><input type='text' name='lastname' placeholder='Lastname' /></div> <div><input type='text' name='email' placeholder='Email' /></div> <div><input type='submit' value='Submit' /></div> </form> <!-- where the response will be displayed --> <div id='response'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <script> $(document).ready(function(){ $('#userForm').submit(function(){ // show that something is loading $('#response').html("<b>Loading response...</b>"); /* * 'post_receiver.php' - where you will pass the form data * $(this).serialize() - to easily read form data * function(data){... - data contains the response from post_receiver.php */ $.post('post_receiver.php', $(this).serialize(), function(data){ // show the response $('#response').html(data); }).fail(function() { // just in case posting your form failed alert( "Posting failed." ); }); // to prevent refreshing the whole page page return false; }); }); </script> </body> </html>
LIVE DEMO
3. jQuery post JSON data using .post() method
Sometimes you don't want to post data from an HTML form. You can do it by creating a JSON string, and here's how you'll be able to post it.
<html> <head> <title>jQuery post JSON data using .post() method by codeofaninja.com</title> </head> <body> <h1>jQuery post JSON data using .post() method</h1> <div>Click the button below to get response.</div> <!-- our form --> <input type='button' value='Post JSON' id='postJson' /> <!-- where the response will be displayed --> <div id='response'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <script> $(document).ready(function(){ $('#postJson').click(function(){ // show that something is loading $('#response').html("<b>Loading response...</b>"); /* * 'post_receiver.php' - where you will pass the form data * $(this).serialize() - to easily read form data * function(data){... - data contains the response from post_receiver.php */ $.post('post_receiver.php', { user_id: "143", username: "ninjazhai", website: "http://codeofaninja.com/" }, function(data){ // show the response $('#response').html(data); }).fail(function() { // just in case posting your form failed alert( "Posting failed." ); }); // to prevent refreshing the whole page page return false; }); }); </script> </body> </html>
LIVE DEMO
Posting a JSON string using the .ajax() method is also possible, you can just replace the serialize() part with your JSON string.
Posted Data
Where did the posted data go? To the file where you want the posted data to be processed! But in our example, we just print the posted data. post_receiver.php has the following code
<?php echo "<pre>"; print_r($_POST); echo "</pre>"; ?>
For FREE programming tutorials, click the red button below and subscribe! :)
website