This article is mainly about jquery. Ajax () method calls the ASP.net background of the introduction, the need for friends can come to the reference, I hope to help you.
Using jquery's $.ajax () makes it easy to invoke the ASP.net background method. Let's start with a simple example warm up. 1, parameter-free method calls asp.net code: Codes are as follows: using System.Web.Script.Services; [WebMethod] public static string SayHello () { &NB Sp;return "Hello ajax!"; } using System.Web.Script.Services; [WebMethod] public static string SayHello () { return "Hello ajax!";} NOTE: 1. Method must be static method, and must have [WebMethod] 's declaration JQuery code: The codes are as follows:///<reference path= "Jqu Ery-1.4.2-vsdoc.js "/> $ (function () { $ (" #btnOK "). Click (function () { & nbsp $.ajax ({ //To post mode type: "Post", //method on page and method name &nbs p; URL: "Data.aspx/sayhelLo ", ContentType:" Application/json; Charset=utf-8 ", DataType:" JSON ", Success:function (data) { //return Data with DATA.D get content alert (DATA.D); }, ERROR:FU Nction (Err) { alert (err); } }; //Disable button submit return false; }); }); ///<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () { &NBSP; $ ("#btnOK"). Click (function () { $.ajax ({ ///Post Mode/ nbsp type: "Post", /method on page and method name &NBS P URL: "Data.aspx/sayhello", ContentType: "Application/json; Charset=utf-8 " DataType:" JSON " SUCC Ess:function (data) { //back to DATA.D get content &NBS P alert (DATA.D); , error:function (err) { &NBSP ; alert (ERR); } } //Disable button submit return False }); ; Results: 2, with parameter method calls asp.net code: Codes are as follows: using System.Web.Script.Services; [WebMethod] public static string Getstr (String str, string str2) {&NBSP;&NB Sp return str + str2; } using System.Web.Script.Services; [WebMethod] public static string Getstr (String str, string str2) { return str + str2;} JQuery code: Codes are as follows:///<reference path= "Jquery-1.4.2-vsdoc.js"/> $ ( function () { $ ("#btnOK"). Click Function () { $.ajax ({& nbsp; type: "Post", URL: "Data.aspx/getstr", /method The writing of parameters must be to, STR is the name of the formal parameter, STR2 is the name of the second formal parameter &n bsp; data:"{' str ': ' I am ', ' str2 ': ' XXX '}" ContentType: "Application/json; Charset=utf-8 ", DataType:" JSON ", Success:function (data) { //return Data with DATA.D get content alert (DATA.D); }, ERROR:FU Nction (Err) { alert (err); } }; //Disable button submit return false; }); }); ///<reference path= "Jquery-1.4.2-vsdoc.js"/&Gt $ (function () { $ ("#btnOK"). Click (function () { $.ajax ({ &NBS P Type: "Post" URL: "Data.aspx/getstr", //method The writing of parameters must be to, STR is the name of the formal parameter, STR2 is the name of the second parameter data: "{' str ': ' I am ', ' str2 ':" ' XXX '} ', ContentType: ' Application/json; Charset=utf-8 " DataType:" JSON " SUCC Ess:function (data) { //back to DATA.D get content &NBS P alert (DATA.D); , error:function (err) { &NBSP ; alert (ERR); } &NBSP; }); //Disable button submit return false; }); ; Run results: Following into the advanced application ROM 3, return array method of the call ASP.net code: The codes are as follows: Using System.Web.Script . Services; [WebMethod] public static list<string> GetArray () { &nbs P list<string> li = new list<string> (); for (int i = 0; i < i++) Li. ADD (i + ""); return li; } using System.Web.Script.Services; [WebMethod] public static list<string> GetArray () { list<string> li = new list<string& gt; (); for (int i = 0; i < i++) Li. ADD (i + ""); return li; } JQuery code: Codes are as follows:///<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () { $ ("#btnOK"). Click (function () { &NB Sp $.ajax ({ type: "Post", &NB Sp URL: "Data.aspx/getarray" ContentType: "application/ Json Charset=utf-8 ", DataType:" JSON ", Success:function (data) { //insert Before First empty UL $ ("#list"). HTML (""); //recursive Access data &NB Sp $ (DATA.D). each (function () { &NBS P //Insert results into Li $ ("#list"). Append ("<li>" + This + "& Lt;/li> "); alert (DATA.D); }, ERROR:FU Nction (Err) { alert (err); } }; //Disable button submit return false; }); }); ///<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () { $ ("#btnOK"). Click (function () {& nbsp $.ajax ({ type: "Post",   URL: "Data.aspx/getarray," ContentType: "Application /json; Charset=utf-8 " DataType:" JSON " SUCC Ess:function (data) { //Insert first empty UL &NBSP ; $ ("#list"). HTML (""); //recursive Access data & nbsp $ (DATA.D). each (function () { //insert result to Li inside   ; $ ("#list"). Append ("<li>" + This + "</li>"); }); alert (DATA.D); }, &NBsp Error:function (Err) { alert (err); &NB Sp } }); //Disable button submit return false; }); ; Run results: 4, return hashtable method call asp.net code: Codes are as follows: using System.Web.Script.Services; using System.Collections; [WebMethod] public static Hashtable Gethash (string key,string value) {  ; Hashtable hs = new Hashtable (); HS. ADD ("www", "yahooooooo"); HS. ADD (key, value); return HS; } using System.Web.Script.Services; Using System.Collections; [WebMethod] public static Hashtable Gethash (string key,string value) { Hashtable hs = new Hashtable () ; HS.ADD ("www", "yahooooooo"); HS. ADD (key, value); return HS; } JQuery code: Codes are as follows:///<reference path= "Jquery-1.4.2-vsdoc.js"/> $ ( function () { $ ("#btnOK"). Click Function () { $.ajax ({& nbsp; type: "Post", URL: "Data.aspx/gethash", //Remember add double quotes t_t & nbsp data: "{' key ': ' Haha ', ' value ': ' Haha!" '} ', ContentType: "Application/json;" Charset=utf-8 ", DataType:" JSON ", Success:function (data) { Alert ("Key:haha ==>"+data.d["haha"]+ "n key:www ==>" +data.d["www"]); }, ERROR:FU Nction (Err) { alert (err + "err"); } } //Disable button submit return false; }); }); ///<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () { $ ("#btnOK"). Click (function () {& nbsp $.ajax ({ type: "Post", & nbsp URL: "Data.aspx/gethash" //Remember add double quotes t_t Data: "{' key ': ' Haha ', ' value ': ' Haha!" '} ', &NBSP; ContentType: "Application/json; Charset=utf-8 " DataType:" JSON " SUCC Ess:function (data) { alert ("Key:haha ==>" +data.d["haha"]+ "n Key:www ==> "+data.d[" www "]); , error:function (err) { &NBSP ; alert (err + "err"); } } //Disable button submit return false; }); ; Run results: 5, Operation XML Xmltest.xml: Code as follows: <?xml version= "1.0" encoding= "Utf-8"?> <data> <item> <id>1</id> <name>qwe& lt;/name> </item> <item> &NBsp <id>2</id> <name>asd</name> </item> </data> <?xml version= "1.0" encoding= "Utf-8"?> <data> <item> & lt;id>1</id> <name>qwe</name> </item> <item> <id>2</id> <name>asd</name> </item> </data> JQuery Code : The code is as follows: $ (function () { $ ("#btnOK"). Click (function () { $.ajax { URL: "Xmltest.xml", &NBS P dataType: ' xml ',//return type is XML, and front json, not the same SUCCESS: function (XML) { //Empty list & nbsp   $ ("#list"). HTML (""); //Find XML elements KVM online shopping Brush website Construction Beijing Express Company Ultrasonic Welding Machine   ; $ (XML). ("Data>item"). each (function () { $ ("#list") Append ("<li>id:" + $ (this). FIND ("id"). Text () + "& Lt;/li> "); $ ("#list"). Append ("<li>name:" + $ ( This). Find ("name"). Text () + "</li>"); }) &N Bsp }, error:function (result, status) {//If no above catch error will execute the callback function here alert (status); }   }); //Disable button submit return false; }); }); $ (function () { $ ("#btnOK"). Click (function () { $.ajax ({ &NBS P URL: "Xmltest.xml", dataType: ' xml ',//return type is XML, and front json, It's not the same. success:function (XML) { & nbsp Clear list $ ("#list"). HTML (""); //Find XML Elements $ (XML). Find ("Data>item"). each (function () { $ ("#li St "). Append (" <li>id: "+ $ (this). FIND (" id "). Text () +" </li> "); &NBsp $ ("#list"). Append ("<li>name:" + $ (this). Find ("Name"). Text () + "</li>"); &nbs }, \ n P Error:function (result, status) {//If no above capture error will execute this callback function & nbsp Alert (status); } } //Disable button submit return false; }); });