How to Create a jQuery Ajax Post with PHP
In this short tutorial, we are going to share with you how to create a jQuery Ajax post request with PHP.
Also, you can see how to post JSON data with jQuery easily and quickly.
After checking out this tutorial, you will be able to create ajax post requests much more easily. What you need is looking through the options below.
jQuery Post Form Data with .Ajax() Method
Using the .ajax() method is one of the best solutions to the problem. Here is how you should act to create a jQuery post request with this method:
html> html> head> title>jQuery post form data with .ajax() method by codeofaninja.com title> style> div < margin: 10px; > style> head> body> h1>jQuery post form data with the .ajax() method h1> div>Filling out and submitting the form below to receive a response. div> form id="userForm" action="/form/submit" method="post"> div> input type="text" name="firstname" placeholder="Firstname" /> div> div> input type="text" name="lastname" placeholder="Lastname" /> div> div> input type="email" name="email" placeholder="Email" /> div> div> input type="submit" value="Submit" /> div> form> 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( ) < // showing that something is loading $('#response').html("Loading response. "); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data quickly * function(data) <. - data includes the response from post_receiver.php */$.ajax(< type: 'POST', url: 'post_receiver.php', data: $(this).serialize() >) .done(function(data) < // demonstrate the response $('#response').html(data); >) .fail(function( ) < // if posting your form failed alert("Posting failed."); >); // to restrain from refreshing the whole page, it returns false; >); >); script> body> html>JQuery Post Form Data with .Post() Method
The .post method is considered a shorthand for the .ajax method. Its syntax is more descriptive. See how to use it correctly:
html> html> head> title>jQuery post form data using .post() method by codeofaninja.com title> style> div < margin: 15px; > style> head> body> h1>jQuery post form data using .post() method h1> div>Filling out and submitting the form below to receive a response. div> form id="userForm" action="/form/submit" method="post"> div> input type="text" name="firstname" placeholder="Firstname" /> div> div> input type="text" name="lastname" placeholder="Lastname" /> div> div> input type="email" name="email" placeholder="Email" /> div> div> input type="submit" value="Submit" /> div> form> 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( ) < // showing that something is loading $('#response').html("Loading response. "); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data quickly * function(data) <. - data includes the response from post_receiver.php */$.post('post_receiver.php', $(this).serialize(), function(data) < // demonstrate the response $('#response').html(data); >).fail(function( ) < //if posting your form fails alert("Posting failed."); >); // to restrain from refreshing the whole page, the page returns false; >); >); script> body> html>jQuery Post JSON Data with .Post() Method
As an additional information, here, we provide you with an example on how to post JSON data. For that purpose, you need to generate a JSON string and post it as shown below:
html> html> head> title>jQuery post JSON data using .post() method by codeofaninja.com title> head> body> h1>jQuery post JSON data with .post() method h1> div>Click the button below to receive a response. div> input type="button" value="Post JSON" id="postJson" /> 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( ) < // showing that something is loading $('#response').html("Loading response. "); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data easily * function(data) <. - data includes the response from post_receiver.php */$.post('post_receiver.php', < user_id: "143", username: "ninjazhai", website: "https://codeofaninja.com/" >, function(data) < // demonstrate the response $('#response').html(data); >).fail(function( ) < // if posting your form failed alert("Posting failed."); >); // to restrain from refreshing the whole page page returns false; >); >); script> body> html>Why to Use jQuery for Ajax Requests?
In this snippet, we represented to you several ways of making ajax post requests with jQuery. You may ask why to use it. The reason to use it in your practice is apparent: it provides you with the simplest, short and readable code.
About jQuery Ajax Get() and Post() Methods
These methods are used for requesting data from the server using HTTP get or post request.
They are mainly applied for implementing request and response between the client and the server.
Get is used for requesting data from a particular resource. Post is used for submitting data to be processed to a particular resource.