Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use Ajax in jQuery, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Jquery is well encapsulated in asynchronous submission, and it is very troublesome to use AJAX directly. Jquery greatly simplifies our operation, not to mention the surprise of the browser.

$.post and $.get are some simple methods. If you want to deal with complex logic, you still need to use jQuery.ajax ().

I. the general format of $.ajax

$.ajax ({type: 'POST', url: url, data: data, success: success, dataType: dataType})

2. Parameter description of $.ajax

Parameter description

Url is required. Specify which URL to send the request to. Data is optional. Mapping or string value. Specifies the data to be sent to the server with the request. Success (data, textStatus, jqXHR) is optional. The callback function that is executed when the request is successful. DataType

Optional. Specifies the data type of the expected server response.

Intelligent judgment (xml, json, script, or html) is performed by default.

3. Some things that $.ajax need to pay attention to:

There are three main ways of 1.data, html splicing, json array, form form serialized by serialize (); specified by dataType, do not specify intelligent judgment.

2.$.ajax only submits form as text. If asynchronous submission including upload is not passed, you need to use $. AjaxSubmit of jquery.form.js.

4. $.ajax my practical application example

/ / .$ .ajax Asynchronous request with json data var aj = $.ajax ({url:'productManager_reverseUpdate',// jumps to action data: {selRollBack: selRollBack, selOperatorsCode: selOperatorsCode, PROVINCECODE: PROVINCECODE, pass: pass}, type:'post', cache:false, dataType:'json', success:function (data) {if (data.msg = = "true") {/ / view ("modified successfully!") ; alert ("modified successfully!") ; _ window.location.reload ();} else {view (data.msg);}}, error: function () {/ / view ("exception!") ; alert ("exception!") ;}}); / .$ .ajax serializes the asynchronous request function noTips () with the table content as a string {var formParam = $("# form") .serialize (); / / serializes the table content as the string $.ajax ({type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function (data) {}}) } / / .$ .ajax splices the asynchronous request var yz=$.ajax of url ({type:'post', url:'validatePwd_checkPwd?password='+password, data: {}, cache:false, dataType:'json', success:function (data) {if (data.msg = = "false") / / the server returns false, then change the value of validatePassword to pwdError, which is asynchronous You need to consider the return time {textPassword.html ("incorrect business password!") ; $("# validatePassword") .val ("pwdError"); checkPassword = false; return;}}, error:function () {}}); / .$ .ajax splicing data asynchronous request $.ajax ({url:'/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async: false, / / defaults to true asynchronous error:function () {alert ('error')) }, success:function (data) {$("#" + divs) .html (data);}})

The following is that ajax () provides a large number of parameters, so you can implement very complex functions.

The parameter name type describes the address at which the urlString (default: current page address) sends the request. TypeString (default: "GET") request method ("POST" or "GET"), default is "GET".

Note: other HTTP request methods, such as PUT and DELETE, can also be used, but only some browsers support them. TimeoutNumber sets the request timeout in milliseconds. This setting overrides the global setting. AsyncBoolean (default: true) by default, all requests are asynchronous.

If you need to send a synchronization request, set this option to false.

Note that the synchronization request will lock the browser, and other user actions must wait for the request to complete. BeforeSendFunction can modify the functions of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header.

The XMLHttpRequest object is the only parameter.

[javascript] view plaincopy

Function (XMLHttpRequest) {

This; / / the options for this ajax request

}

CacheBoolean (default: true) jQuery 1.2 new feature, set to false will not load request information from the browser cache. Callback function after the completion of the completeFunction request (called when the request succeeds or fails).

Parameter: XMLHttpRequest object, success information string.

[javascript] view plaincopy

Function (XMLHttpRequest, textStatus) {

This; / / the options for this ajax request

}

ContentTypeString (default: "application/x-www-form-urlencoded") content encoding type when sending information to the server. The default value is suitable for most applications. DataObject

The data that String sends to the server. Will be automatically converted to the request string format. The GET request will be appended to the URL.

Check the description of the processData option to disable this automatic conversion. Must be in Key/Value format.

If it is an array, jQuery automatically corresponds to the same name for different values.

For example, {foo: ["bar1", "bar2"]} is converted to'& foo=bar1&foo=bar2'. The type of data that dataTypeString expects the server to return. If not specified, jQuery will automatically follow the HTTP package MIME information

Returns responseXML or responseText and passes it as a callback function parameter. Available values are:

"xml": returns the XML document, which can be processed with jQuery.

"html": returns plain text HTML information; contains script elements.

"script": returns plain text JavaScript code. The results are not automatically cached.

"json": returns JSON data.

"jsonp": JSONP format. When calling a function in the form of JSONP

Such as "myurl?callback=?" Will jQuery be replaced automatically? Is the correct function name to execute the callback function.

ErrorFunction (default: automatic judgment (xml or html)) this method is called when the request fails.

This method takes three parameters: the XMLHttpRequest object, the error message, and (possibly) the captured error object.

[javascript] view plaincopy

Function (XMLHttpRequest, textStatus, errorThrown) {

/ / usually only one of textStatus and errorThown has a value

This; / / the options for this ajax request

}

Whether the global AJAX event is triggered by globalBoolean (default: true). Setting to false will not trigger the global AJAX event

Such as ajaxStart or ajaxStop. Can be used to control different Ajax events

IfModifiedBoolean (default: false) only gets new data when the server data changes.

Use HTTP package Last-Modified header information to determine.

ProcessDataBoolean (default: true) by default, the data sent is converted to an object (not technically a string)

To match the default content type "application/x-www-form-urlencoded".

Set to false if you want to send DOM tree information or other information that you do not want to convert.

SuccessFunction

Call back the function after the request is successful. This method takes two parameters: the server returns the data and the status

[javascript] view plaincopy

Function (data, textStatus) {

/ / data could be xmlDoc, jsonObj, html, text, etc...

This

/ / the options for this ajax request

}

The above is all the contents of the article "how to use Ajax in jQuery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.