jQuery.ajax( url [, settings ] ) performs an Asynchronous HTTP (Ajax) requests using jQuery.
Basic settings
Url
$.ajax({url: '/Products/Details/1234' })
Querystring
$.ajax({url: '/Products/Details?id=1234&showorders=false' })
type: HTTP Method
$.ajax({url: '/Products/Details/1234', type: 'POST' })
data: Data to be sent to the server.It is converted to a query string, if not already a string. It's appended to the url for GET-requests.
$.ajax({url: '/Products/Details', type: 'POST', data: {id: 1234} })
$.ajax({url: '/Products/Details', type: 'POST', data: $('form1').serialize() })
var contact = {firstName:"Bob", lastName:"Bob", mobile:"9907833", email: "bob@example.com"};
$.ajax({url: '/Contact/Create', type: 'POST', data: JSON.stringify(contact) })
contentType: Type of data send to the server
default value is 'application/x-www-form-urlencoded; charset=UTF-8'
$.ajax({url: '/Products/Details', type: 'POST', data: {id: 1234}, contentType: 'application/json; charset=UTF-8' })
dataType: type of data expecting from server. If none is specified, jQuery will try to infer it based on the MIME type of the response - xml, json, script, or html
$.ajax({url: '/Products/Details', type: 'POST', data: {id: 1234}, dataType: 'html' })
headers: Helps to set http header(s)
$.ajax({url: '/Products/Details', headers: { Accept: "application/json; charset=utf-8", "Content-Type": "application/x-www-form-urlencoded" }, data: $('form1').serialize() })
Handling succeeded request/response
$.ajax({url: '/Products/Details?id=1234',
success: function (result, textStatus, jqXHR) {
alert("success");
}
})
The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR object simulates native XHR functionality where possible.
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "" )
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() {
alert( "second complete" );
});
Handling failed request/response.
$.ajax({url: '/Products/Details?id=1234',
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);alert(jqXHR.status);alert(errorThrown);
} })
Handling response based of HTTP status code
$.ajax({url: '/Products/Details?id=1234',
statusCode: {
201: function (s) {
$('#result').html(s);
},
404: function () {
alert("Not Found!");
}
}
})
Ajax Shorthand Methods
jQuery.get() Load data from the server using a HTTP GET request.
$.get( "test.php", function( data ) { $( "body" ).append(data) });
jQuery.getJSON() Load JSON-encoded data from the server using a GET HTTP request.
(function() {
$.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "![]()
" ).attr( "src", item.media.m ).appendTo( "#images" );
});
});
})();
jQuery.getScript() Load a JavaScript file from the server using a GET HTTP request, then execute it. jQuery.getScript() sets cache to false by default.
$.getScript("/jscript/test.js")
jQuery.post() Load data from the server using a HTTP POST request. Pages fetched with POST are never cached, so the cache and ifModified options in jQuery.ajaxSetup() have no effect on these requests.
$.post( "/product/list", function( data ) {
$( ".result" ).html( data );
});
jQuery.load() Load data from the server and place the returned HTML into the matched element.
$( "#result" ).load( "/product/list" );
