jquery is very well encapsulated in asynchronous commits, and it's very cumbersome to use Ajax directly, and jquery greatly simplifies our operations, regardless of the browser's surprise.
Recommend a good jquery Ajax instance article, forget to go to see, the address is:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html and/http www.w3school.com.cn/jquery/
$.post, $.get is a simple method, if you want to deal with complex logic, still need to use the Jquery.ajax ()
I. General format of $.ajax
$.ajax ({
Type: ' POST ',
URL: URL ,
Data: data ,
Success: Success ,
DataType: dataType
});
Second, the parameter description of $.ajax
Parameter description
Url |
Necessary. Specifies which URL to send the request to. |
Data |
Optional. The map or string value. Specifies the data that is sent to the server along with the request. |
Success (data, Textstatus, JQXHR) |
Optional. The callback function to execute when the request succeeds. |
DataType |
Optional. Specifies the data type of the expected server response. The default is to perform smart judgments (XML, JSON, script, or HTML). |
three, $.ajax need to pay attention to some places:
There are three main ways of 1.data, HTML splicing, JSON array, form form is serialized by Serialize (), and no intelligent judgment is specified by datatype.
2.$.ajax only submits form in text mode, if the asynchronous commit contains <file> uploads are not passed over, you need to use Jquery.form.js $.ajaxsubmit
Iv. $.ajax Examples of my practical application
JS Code
- 1.$.ajax asynchronous requests with JSON data
- var aj = $.ajax ({
- URL:' productmanager_reverseupdate ',//Jump to action
- data:{
- Selrollback:selrollback,
- Seloperatorscode:seloperatorscode,
- Provincecode:provincecode,
- Pass2:pass2
- },
- 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! ");
- }
- });
- 2.$.ajax asynchronous requests that serialize the contents of a table to a string
- function Notips () {
- var Formparam = $ ("#form1"). Serialize (); Serialize table contents as strings
- $.ajax ({
- Type:' post ',
- URL:' notice_notipsnotice ',
- Data:formparam,
- Cache:false,
- DataType:' json ',
- Success:function (data) {
- }
- });
- }
- 3.$.ajax asynchronous requests for stitching URLs
- var Yz=$.ajax ({
- Type:' post ',
- URL:' validatepwd2_checkpwd2?password2= ' +password2,
- data:{},
- Cache:false,
- DataType:' json ',
- Success:function (data) {
- if (data.msg = ="false") //The server returns false to change the value of ValidatePassword2 to Pwd2error, which is asynchronous and takes into account the return time
- {
- Textpassword2.html ("<font color= ' red ' > Business password is incorrect! </font> ");
- $ ("#validatePassword2"). Val ("pwd2error");
- CheckPassword2 = false;
- return;
- }
- },
- Error:function () {}
- });
- 4.$.ajax asynchronous request to splice data
- $.ajax ({
- URL:' <%=request.getcontextpath ()%>/kc/kc_checkmernameunique.action ',
- Type:' post ',
- Data:' mername= ' +values,
- Async: false, //default is True async
- Error:function () {
- Alert (' error ');
- },
- Success:function (data) {
- $ ("#" +divs). HTML (data);
- }
- });
JQuery Ajax instances ($.ajax, $.post, $.get)