JQuery Ajax () method Use guide _jquery

Source: Internet
Author: User
Tags script tag

jquery provides simple and powerful selector features, while also providing good support for AJAX operations. In Ajax, jquery provides the following simple method in addition to the underlying Jquery.ajax () method:

(1) Jquery.get (URL, [data], [callback], [type])

(2) Jquery.getjson (URL, [data], [callback])

(3) Jquery.getscript (URL, [callback])

(4) Jquery.post (URL, [data], [callback], [type])

Because the Jquery.ajax () function is more powerful, configurable parameters are more, now mainly to the attention of this method summary.

1. Jquery.ajax () is requested asynchronously by default and async to False if synchronization is required. Because some applications must synchronize the request data. For example, some flash and JS interactive applications, request a JS function need to get the return data immediately. At this point, you must adopt a synchronized Ajax invocation.

2. Ajax if it is a GET request, the returned data will generally be cached by the browser, if you do not want to be cached, you can set the cache parameter to False, or send the request with a timestamp so that the browser will consider it a new request and reload the data from the server. Of course, a post-sent request will not be cached.

3. DataType: The data type expected to be returned by the server. If not specified, JQuery will automatically return Responsexml or responsetext based on the HTTP packet MIME information and pass as a callback function parameter, available values:

(1) "XML": Returns an XML document that can be processed with jQuery.

(2) "HTML": Returns plain text HTML information, and the included script tag executes when the DOM is inserted.

(3) "script": Returns the plain text JavaScript code. Results are not automatically cached. Unless the "cache" parameter is set. ' Note: ' At remote request (not in the same domain), all post requests will be converted to get requests. (because it will be loaded using the DOM's script tag)

(4) "JSON": Returns the JSON data.

(5) "JSONP": Jsonp format. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? To the correct function name to execute the callback function.

(6) "text": Returns a plain text string

Where the script, JSON settings can solve the cross-domain problem of Ajax.

4. If a string or numeric value is returned by the server, the normal Ajax call is used.

If the server returns a JSON object, it's best to use Jquery.getjson or set Datatype=json. Because the browser needs time to parse the JSON object, it returns the JSON object directly, saving the parsing time and avoiding the error that the server is not able to return, but not the browser.

5. Ajax calls take time, so typically the processing code after the AJAX call is placed in the callback method. This is not the way to handle this:

Copy Code code as follows:

function Getmyprizelist () {
if (Isnotempty (UID)) {
var obj=new Object ();
try{
Jquery.ajax ({type: "Get", url: "Someurl", Async:false,cache:false,datatype: "Script", Scriptcharset: "GBK", Success: function (JSON) {
Obj=json;
}
});
}catch (e) {}
Obj=eval ("(" +obj+ ")");
alert (obj);
var str= "";
for (var i in obj)
{
str+= ' <tr> ' + ' <th> ' +prizearray[obj[i].prizeno]+ ' </th> '
str+= ' <td> ' + ' Cd-key: ' +obj[i].cdkey+ ' </td> '
str+= ' <td> ' + ' term: ' +obj[i].expiratedate+ ' before ' + ' </td></tr> ';
}
JQuery ("#prizelist"). Append (str);
}
}

And you have to deal with it: you're going to put the code in the success function!

Copy Code code as follows:

function Getmyprizelist () {
if (Isnotempty (UID)) {
var obj=new Array ();
try{
Jquery.ajax ({type: "Get", url: "Someurl",
Cache:false,
DataType: "Script",
Scriptcharset: "GBK",
Success:function (JSON) {
try{
Obj=result;
}catch (e) {}
JQuery ("#prizelist"). HTML ("");
var str= "";
for (Var i=0;i<obj.length;i++) {
str+= ' <tr><th> ' +prizearray[obj[i].prizeno]+ ' </th> ';
str+= ' <td>cd-key: ' +obj[i].cdkey+ ' </td> ';
str+= ' <td> term: ' +obj[i].expiratedate+ ' before </td></tr> ';
}
JQuery ("#prizelist"). Append (str);
}
});
}catch (e) {}
}
}

6. Jquery.getjson Examples:

Copy Code code as follows:

Internal function to implement the loading and setting value of the debtor details
function Innershowdetail () {
Get data in JSON format
$.getjson (' load.do ', {Id:userid}, function (JSON) {
Set value based on key
For (key in JSON) {
if (key = = ' id ') {
$ (' #detailDiv # ' + key). Val (Json[key]);
} else {
if (json[key] = = ") {
No value set to NULL
$ (' #detailDiv # ' + key '). HTML (');
else if (key = = ' sex ') {
$ (' #detailDiv # ' + key). html (Json[key] = = ' 0 '? ' Female ': ' Male ';
else if (key = = ' Group ') {
if (Json[key]!= null) {
$ (' #detailDiv # ' + key). html (json[key][' groupname '));
}
} else {
$ (' #detailDiv # ' + key). HTML (Json[key]);
}
}
}
Set dialog box title and content
$ (' #detailDiv '). Removeattr (' class ');
Dialog.settitle (' view person [' + json[' userName '] + '] details ');
Dialog.setcontent ($ (' #detailDiv '). html ());
});
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.