Analysis of the processing _jquery of jquery Ajax request parameters and return data

Just contact to learn to use jquery Ajax, feel really good magic, so you can take the data back AH. Then I can render the retrieved data onto the page, a rowing boat.

Early exposure to the project, do not know how elegant to use jquery Ajax (now not elegant);

At that time read the code that someone else wrote

Yes

$.post ("", "",...)

also have

$.get ("", "",...)

And also

$.ajax ()

Of course now know the point, these writing is a meaning, or accustomed to use $.ajax () write it.

Before the data processing, send a request (JSON data format), and then yourself through the following way

var request = {};
Request.name = $ (". Name"). Val ();
Request.age = $ (". Age"). Val ();
Request.sex = $ (". Sex"). Val ();
//...

When the form sent a small number of parameters, so did not feel anything, to later a list of many items, and so on, the results of the request on the hand to write a lot of lines, although it can be used, but look at such a code feel what is wrong, at least not "elegant."

Later, it turns out that jquery has a serialize way to serialize form data, which can be a lot easier.

W3c_jquery_serialize-demo

Processing the returned data, rendering the page up.

The previous approach is the same as the above, the returned data is JSON data format, and then the value assigned to the page elements, so the code is often the case.

If the data is a little bit more, it really feels a little ugly. In fact, there should be a better way to return a JSON object, so we can iterate through the object's property values to all values and then render to the page corresponding elements.

Object traversal can be written in for-in (is there a better way to write it?). ）

$.ajax ({
//...
) Success:function (Result) {
for (Var v) {
//if the rendered element is a uniform input box,
$ ("form"). Find ("input[name=" + V + "]"). Val (Result[v]); 
If there are other elements then separate check processing
}}}
)

The name above (or other tag is written first on the page, consistent with the properties of the returned data).

4 Common ways to request Ajax in jquery

1.$.ajax () returns the XMLHttpRequest object that it created.

$.ajax () has only one parameter: The parameter Key/value object, which contains the configuration and callback function information. Detailed parameter options see below.

If you specify the DataType option, make sure that the server returns the correct MIME information (such as the XML return "Text/xml").

Instance:

Saves data to the server and displays information when it succeeds.

$.ajax ({
type: "Post",
dataType: "html",
URL: '/resources/getlist.ashx ',
Data:dataurl,
Success:function (data) {
if (data!= "") {
$ ("#pager"). Pager ({pagenumber:pagenumber, Pagecount:data.split ("$ $ ") [1], buttonclickcallback:pageclick});
$ ("#anhtml"). HTML (Data.split ("$$") [0];}

}
);

2. Load information through a remote HTTP GET request.

This is a simple GET request function to replace the complex $.ajax. Callback functions can be invoked when the request succeeds. If you need to perform a function when an error occurs, use $.ajax.

Instance:

$.get ("test.cgi", {name: "John", Time: "2pm"},
function (data) {
alert ("Data Loaded:" + data);

3. Load information through a remote HTTP POST request.

This is a simple POST request function to replace the complex $.ajax. Callback functions can be invoked when the request succeeds. If you need to perform a function when an error occurs, use $.ajax.

Instance:

$.post ("/resources/addfriend.ashx", {"FID": FIDS, "fname": Fnames, "Tuid": Tuids, "Tuname": Tunames}, function (data) { C1/>if (data = = "OK") {
alert ("Add success!") ");
}
})

4. Load JSON data through an HTTP GET request.

Instance:

$.getjson ("Http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json &jsoncallback=? ",
function (data) {
$.each (data.items, function (I,item) {
$ ("  "). attr (" SRC ", item.media.m). Appendto (" #images ");
if (i = = 3) return false;
};

The above content is small to introduce the jquery Ajax request parameters and return data processing, I hope to help!