jQuery AJAX POST Example

In jQuery AJAX POST Example, I have covered how to make AJAX Post requests with jQuery API.

1.Ajax POST example using .ajax() method
2.Ajax POST example using .post() method
3.AJAX Form POST example

1.JQuery Ajax POST example using $.ajax method

Sample POST request look like:

var  formData = "name=ravi&age=31";  //Name value Pair
	or
var formData = {name:"ravi",age:"31"}; //Array 

$.ajax({
	url : "AJAX_POST_URL",
	type: "POST",
	data : formData,
	success: function(data, textStatus, jqXHR)
	{
		//data - response from server
	},
	error: function (jqXHR, textStatus, errorThrown)
	{

	}
});

To send, POST request you need to set type = “POST” in AJAX settings.
formData: can be an array or name value pairs.
success: callback function is called when the AJAX POST is successful
error: callback function is called when the AJAX POST is failed

Note: To handle JSON data, set dataType=”json”

 

2.jQuery Ajax POST example using $.post method

$.post() method is shortcut of .ajax() method, so using $.post() method we can send AJAX POST requests.

jQuery.post() Syntax:

var jqXHR = jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] );

Valid AJAX POST Requests are:

//request with URL,data,success callback
$.post("AJAX_POST_URL",
	{name:"ravi",age:"31"},
	function(data, textStatus, jqXHR)
	{
          //data: Received from server
	});

//request with URL,success callback
$.post("AJAX_POST_URL",function(data)
{
    //data: Received from server
});
//request with only URL
$.post("AJAX_POST_URL");

 

$.post method is not having any callback method to handle errors. But we can use jqXHR fail() callback method to handle the error.

$.post("AJAX_POST_URL",
	{username:"ravi",pass:"124",submit:true},
	function(data, textStatus, jqXHR)
	{
		//data - response from server
	}).fail(function(jqXHR, textStatus, errorThrown) 
	{
		alert(textStatus);
	});

//With jqXHR callbacks .done() and .fail()
$.post("AJAX_POST_URL",
	{username:"ravi",pass:"124",submit:true}).done(function(data, textStatus, jqXHR) 
        {

        }).fail(function(jqXHR, textStatus, errorThrown) 
	{
		alert(textStatus);
	});

3.AJAX Form POST Example

Below is the sample Form used for POST.

<form name="myform" id="myform" action="ajax-post.php">
User: <input type="text" value="Ravishanker" name="user"  /> <br/>
Password: <input type="password" name="password" value="abcdefgh" />
<input type="hidden" name="xyz" value="123" />
<input type="hidden" name="submit" value="true" />

</form>

Using jQuery.serialize() or jQuery.serializeArray() API, Form data can be serialized. Below example shows how to POST Form data asynchronously.

//var formData = $("#myform").serialize();  //or
var formData = $("#myform").serializeArray();
var URL = $("#myform").attr("action");
$.post(URL,
	formData,
	function(data, textStatus, jqXHR)
	{
	   //data: Data from server.	
	}).fail(function(jqXHR, textStatus, errorThrown) 
	{

	});

For multipart/form-data Form post, check this: http://hayageek.com/jquery-ajax-form-submit

Reference: Jquery Documentaion