jquery ajax post写法,jQuery AJAX POST Example

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

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.

User:

Password:

Using jQuery.serialize() orjQuery.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)

{

});