A brief analysis of jQuery Ajax request parameters and return data processing_jquery

When I first learned to use jQuery ajax, I felt that the real thing was so magical, so that I could get the data back. Then I can render the retrieved data onto the page.

I came into contact with the project very early and didn’t know how to use jquery ajax elegantly (it’s not elegant now);

At that time, I looked at the code written by others

Yes

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

Also

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

Also

$.ajax()

Of course, now you know that these writing methods all have the same meaning, so you should get used to using $.ajax() to write them.

Previous data processing, send data request (json data format), and then use the following method yourself

var request = {};
request.name = $(".name").val();
request.age = $(".age").val();
request.sex = $(".sex").val();
//...

At that time, the form sent few parameter items, so I didn’t think anything of it. Later, when a form had many items, I wrote it like this. As a result, I wrote many lines of request manually. Although it works, I feel like it when I look at this code. There must be something wrong with it, at least it's not "elegant".

Later, I discovered that jquery actually has a serialize method that can serialize form data, which can save a lot of trouble.

w3c_jquery_serialize-demo

Process the returned data and render it to the page.

The previous method is exactly the same as above. The returned data is in json data format, and then the values ​​are assigned to the page elements respectively, so the code is often like this.

If there were more data, it would really look a little ugly. In fact, there should be a better way. What is returned is a json object, so we can get all the values ​​by traversing the object's attribute values ​​and then render them to the corresponding elements of the page in sequence.

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

$.ajax({
//...
success:function(result){
for(var v in result){
// 如果渲染的元素都是统一的输入框形式的话，
$("form").find("input[name="+ v +"]").val(result[v]); 
// 如果有其他元素 则另外单独校验处理
}
}
})

The above name (or other tags must be written in the page first, consistent with the attributes of the returned data).

4 common request methods of ajax in jQuery

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

$.ajax() has only one parameter: parameter key/value object, including each configuration and callback function information. See detailed parameter options below.

If you specify the dataType option, make sure the server returns the correct MIME information (e.g. xml returns "text/xml").

Example:

Save data to the server and display information when successful.

$.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 via remote HTTP GET request.

This is a simple GET request function to replace the complex $.ajax. The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.

Example:

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

3. Load information via remote HTTP POST request.

This is a simple POST request function to replace the complex $.ajax. The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.

Example:

$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})

4. Load JSON data via HTTP GET request.

Example:

$.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){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
}); 

The above content is the processing of jQuery Ajax request parameters and return data introduced by the editor. I hope it will be helpful to everyone!