Analysis of jqueryajax $. ajax () Usage

The jqueyajax part contains the following parts: 1. load (url, [data], [callback]): load remote HTML file code and insert it into the DOM. 2. jQuery. get (url, [data], [callback]): Use the GET Method for asynchronous requests. 3. jQuery... SyntaxHigh

Jquey ajax contains the following parts:

1. load (url, [data], [callback]): load the remote HTML file code and insert it into the DOM.

2. jQuery. get (url, [data], [callback]): Use the GET Method for asynchronous requests.

3. jQuery. post (url, [data], [callback], [type]): Use the POST method for asynchronous requests.

4. jQuery. getScript (url, [callback]): request to load and execute a JavaScript file in GET mode.

JQuery. ajax (options): loads remote data through HTTP requests

In the project, we often need to use the request backend of the refresh list and the ajax framework such as dwr. We will not introduce the obvious disadvantages. Let's get started directly with the code:

[Java]
// Query the list of all information
Function querySiteMessageList (pageIndex, orderFiled ){
// Encapsulate Transfer Parameters
Var obj = new Object ();
Obj. pageIndex = pageIndex;
Obj. orderFiled = orderFiled;
Obj. messageSignal = $ ("# tabSignal"). val ();
$. Ajax ({
Type: "POST ",
Url: "$ {ctx}/siteMessage/queryMessagelist ",
Data: obj,
DataType: "json ",
Success: function (data ){
Var str = "";
// Cyclically output information list
$. Each (data. rows, function (index, elem ){
Var createTime = new Date (elem. publishTime); // obtain the release time and convert it to the Date type
Var availableDate = new Date (elem. availableDate); // obtain the creation time and convert it to the Date type.

// Release time
Var createMonth = createTime. getMonth () + 1;
Var createHour = createTime. getHours ();
Var createMinute = createTime. getMinutes ();
Var createSeconds = createTime. getSeconds ();
// Effective time
Var availableMonth = availableDate. getMonth () + 1;
Var availableDay = availableDate. getDate ();

CreateMonth = createMonth <10? "0" + createMonth: createMonth;
CreateHour = createHour <10? "0" + createHour: createHour;
CreateMinute = createMinute <10? "0" + createMinute: createMinute;
CreateSeconds = createSeconds <10? "0" + createSeconds: createSeconds;

AvailableMonth = availableMonth <10? "0" + availableMonth: availableMonth;
AvailableDay = availableDay <10? "0" + availableDay: availableDay;

Str + ='';
Str + ='';
Str + =''+ Elem. messageId + ''+ elem. title +'';
Str + =''+ Elem. creator +'';
Str + =''+ CreateTime. getFullYear () +'-'+ createMonth +'-'+ createTime. getDate () + '';
Str + = createHour + ':' + createMinute + ':' + createSeconds +'';
Str + =''+ AvailableDate. getFullYear () +'-'+ availableMonth +'-'+ availableDay +'';
Str + =''
Str + = '';
Str + ='';
Str + ='';
});

// Determine whether the output information or information list is based on the current status.
If ($ ("# tabSignal"). val () = 1 ){
// Output information list
$ ("# NewslistTr" cmd.html (str );
// Implement Paging
$ ("# Page_message"). setPager ({RecordCount: data. count, PageIndex: pageIndex, buttonClick: pageClick });
}
Else {
// Output draft information list
$ ("# DraftlistTr" pai.html (str );
// Implement pagination www.2cto.com
$ ("# Page_draft"). setPager ({RecordCount: data. count, PageIndex: pageIndex, buttonClick: pageClick });
}
 
}
});
};

The previous example describes a simple process of requesting the backend to obtain and display the data list. The focus is on the red part:

There are three key points. When the GET method is submitted, the parameter is directly added after the url, url: "$ {ctx}/siteMessage/queryMessagelist? Id = "+ id,

The data parameter can be used in both get and post methods. Multiple parameters can be encapsulated into obj objects.

The succes function can obtain the return value. The type of the returned value is specified by dataType. For specific parameters, see the official documentation.

Generally, the returned data is processed in the succes function. Here, I retrieve the returned data and output it to the specified location.

In short, the jqury ajax method can be used to implement no-refreshing requests.