Obtain the data returned by jquery Ajax, including JSON, XML, and TXT.

Jquery provides a series of global methods to encapsulate the XMLHTTPRequest object. During Ajax development, you no longer have to worry about the problem of browser clients.

I. $. Ajax (options)
It is the most fundamental jquery Ajax method. It has only one parameter options, which contains the request information and callback function information. The parameter content is in the key: Value Pair format and is optional.
Syntax:
$. Ajax ({options });
URL:(StringThe request sending Address, which can be a server page or WebService action.
Type:(String) Request Method, post or get
Data:(Object) Data that is included in the request sent to the server. Is the key: Value Pair form, such as: {name: "grayworm", sex: "male"}. If it is an array {works: ["work1", "work2"]}
Datatype:(String) Expected data type returned. XML, HTML, JSON, text, etc.
Beforesend:(Function) Is triggered before an Ajax request is sent. If false is returned, the request is canceled. If the GIF animation needs to be displayed for an asynchronous request, set visibility here.
Function (XMLHttpRequest ){}

Complete:(Function) The callback function after the request is called (called when the request succeeds or fails). If the asynchronous request shows GIF animation, set the corresponding invisible here.
Function (XMLHttpRequest, textstatus ){
// Textstatus is a string that describes the returned status.
}

Success:(Function) Callback function when the request is successfully executed
Function (data, textstatus ){
// Data is the data returned by the server in XML, JSON, text, and other formats.
// Textstatus is a string that describes the returned status.
}

Error:(Function) Callback function when the request fails to be executed
Function (XMLHttpRequest, textstatus, errorthrown ){
// Data is the data returned by the server in XML, JSON, text, and other formats.
// Textstatus, errorthrown indicates the returned status
}

Example:
1. send a request to the page and return data in XML format
Page code:


Figure 3
Jquery code:


Figure 1

2. send a request to the page and return data in JSON format
Page code:


Figure 4
Jquery code:


Figure 2

3. Send a request to WebService. A simple asynchronous call with no parameters is returned.
Server code:


Figure 5
Jquery code:


Figure 6

4. Send a request to WebService. If a parameter returns a simple type, it is called.
Server code:


Figure 7
Jquery code:


Figure 8

5. Send a request to WebService and return the asynchronous call of the object.
Server code:


Figure 9
Jquery code:


Figure 10

6. Send a request to WebService and return the asynchronous call of the collection object
Server code:


Figure 11
Jquery code:


Figure 12

Note:
The WebService request type is post, and the WebService URL is "[webserviceurl]/[webmethod]"
Data must be transmitted in JSON string format.
After datatype is set to JSON, the result is the returned JSON object.

2. $. Get () and $. Post ()
$. Ajax () is the most basic Ajax method. In jquery, two simple Ajax call methods are provided: $. Get () and $. Post (),These two methods encapsulate $. Ajax.With the foundation of $. Ajax (), the following two methods are easy to learn.
1. $. Get ()
Syntax:
$. Get (URL [, data] [, callback] [, type])
URL:(String) URL of the requested HTML page
Data:(Object) Data sent to the server, written in key/value pairs, such as: {name: "zhangsan", age: "18 "}
Callback:(Function) Callback function. This method is called only when the returned status is success.
Type:(StringFormat of the content returned by the server. XML, HTML, JSON, text, etc.

2. $. Post ()
Syntax:
$. Post (URL [, data] [, callback] [, type])
URL:(String) URL of the requested HTML page
Data:(Object) Data sent to the server, written in key/value pairs, such as: {name: "zhangsan", age: "18 "}
Callback:(Function) Callback function. This method is called only when the returned status is success.
Type:(StringFormat of the content returned by the server. XML, HTML, JSON, text, etc.

$. Post () is similar to $. Get (), but the data parameter transmission method is different. The two are the same as the traditional get/post submission method.

Example:
1. $. Get () and $. Post () Send asynchronous requests to the page and return XML data
Server code:


Figure 3
Jquery code:


Figure 13

2. $. Get () and $. Post () Send asynchronous requests to the page and return JSON data
Server code:


Figure 4
Jquery code:


Figure 14
3. $. Get () and $. Post () Send asynchronous requests to WebService


Figure 15:

Iii. serialization Elements
If there are many page form elements, you must send all the elements in the form together to the server when sending an Ajax request. If you still use the JSON syntax in the form of key/value pairs to pass parameters, it must be at $. get () or $. A long JSON parameter written in post.
In jquery, we provide a serialization method to solve this problem. The serialization method is serialize ()
Sample Code:


Figure 16


Figure 17