Directory (updated articles will be connected, and an article will be updated every two to three days starting from March 13, July 25 ):
ASP. NET + jquery. Ajax details 1-opening section (published on February 25)
ASP. NET + jquery. Ajax details 2-$. Load (published on 2012.07.26)
ASP. NET + jquery. Ajax details 3-$. Get and $. Post (published on February 30)
ASP. NET + jquery. Ajax details 4-$. getjson (published on February 31)
ASP. NET + jquery. Ajax details 5-$. getscript (2012.08.04)
ASP. NET + jquery. Ajax details 6-$. ajaxsetup (2012.08.06)
ASP. NET + jquery. Ajax details 7-Global Ajax events (published on 2012.08.09)
ASP. NET + jquery. Ajax details 8-core $. Ajax (published on February 12)
ASP. NET + jquery. Ajax details 9-serialize and serializearray (February 15)
ASP. NET + jquery. Ajax detailed description: 10-json and XML + are written at the end of the article (published on February 20 !)
In the previous article, we mainly talked about Ajax and its original implementation methods. We briefly introduced jquery. Starting from this article, we will have a deep understanding of jquery. Ajax. Starting from $. Load.
Jquery. Load (URL [, data] [, callback])
URL: the URL of the Request webpage.
Data (optional): Key/value data sent to the server
Callback (optional): callback function upon request Completion
The load () method provides the callback function, which has three parameters: responsetext, textstatus, and XMLHttpRequest, which respectively represent the content, Request status, and XMLHttpRequest objects returned by the request.
$ ("# Result"). Load ("Data/getserviceinfo. aspx", function (responsetext, textstatus, XMLHttpRequest ){
// Responsetext: Content returned by the request
// Textstatus: Request status: Success, error, notmodified, timeout
// XMLHttpRequest: XMLHTTPRequest object
});
If you only need to load some elements in the getserviceinfo. ASPX page, you can use the URL parameter of the load () method for the purpose. By specifying a selection character for the URL parameter, you can easily filter the required content from the loaded HTML document.
The syntax structure of the URL parameter of the load () method is "url selector ". Note that there is a space between the URL and the selector.
// Test the load. Use the selector to filter out Tianjin.
Function loadfilter (event ){
$ ("# Result"). Load ("Data/getcity. aspx? Resulttype = HTML & t = "+ (new date (). gettime () +" Ul> Li: Not (: Contains ('tianjin '))");
}
The load () method is automatically specified based on the parameter data. If no parameter is transmitted, the get method is used; otherwise, the POST method is automatically converted.
// Test the load request in post mode. Note: The get method is used by default and the POST method is automatically converted when additional parameters are passed.
Function loadpost (event ){
$ ("# Result"). Load ("Data/getserviceinfo. aspx", {"Param": "testload-Post "});
}
Note: 1. In the load () method, no matter whether the Ajax request is successful or not, as long as the request is complete (complete), the callback function is triggered
2. If there are parameters, when receiving parameters on the getserviceinfo. ASPX page, you should use the httpcontext. Current. request ["Param"] format, and request. querysting cannot be obtained.
Instance (vs2010 ):
Client-getserviceinfo. aspx-
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "jqueryajaxload. aspx. cs" inherits = "jqueryajaxtest. jqueryajaxload" %> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">Server 1-getcity.aspx-
Using system; using system. collections. generic; using system. LINQ; using system. web; using system. web. ui; using system. web. UI. webcontrols; namespace jqueryajaxtest. data {public partial class getmethodinfo: system. web. UI. page {protected void page_load (Object sender, eventargs e) {string Param = ""; // obtain the parameter if (! String. isnullorempty (httpcontext. current. request ["Param"]) {Param = httpcontext. current. request ["Param"];} // clear the Buffer Response. clear (); // write the string to the response output stream response. write ("HTTP Request Method:" + request. httpmethod. toupper () + "; the passed parameter is:" + PARAM); // the client that sends all the current buffered outputs and stops this page from executing response. end ();}}}Server 2 --
Using system; using system. collections. generic; using system. LINQ; using system. web; using system. web. ui; using system. web. UI. webcontrols; namespace jqueryajaxtest. data {public partial class getcity: system. web. UI. page {private string resulttype = "JSON"; protected void page_load (Object sender, eventargs e) {// obtain the request parameter if (! String. isnullorempty (request. querystring ["resulttype"]) {resulttype = request. querystring ["resulttype"]. tolower () = "html "? "Html": "JSON";} string html = getresult (resulttype); // clear the Buffer Response. clear (); // write the string to the response output stream response. write (HTML); // send the Current Buffer output to the client, and stop this page to execute response. end ();} private string getresult (string resulttype) {string result = ""; if (resulttype = "html ") {// returned HTML result = @ "<ul> <li id =" 1 ""> Beijing </LI> <li id = "2" "> Tianjin </ LI> </ul> ";} else if (resulttype = "JSON") {// returned JSON data result = @ "[{" "pkid" ":" "0001" "," "provinceid "": "" BJ "", "" cityname ":" "Beijing" "," "citynameen": "" Beijing "", "" postcode "": "" 010 "", "" ishotcity "": false}, {"" pkid "": "0002" "," "provinceid" ":" TJ "", "" cityname ":" "Tianjin" "," "citynameen" ":" "Tianjin" "," "postcode" ":" 022 "", "" ishotcity "": false}] ";}return result ;}}}The second article has arrived. Compared with the original Ajax method in the first article, this method is much simpler. Article 3 will be killed immediately. For more information about what to write in this series, see article 1.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
