Use jquery to directly call the Asp.net background Method

ArticleDirectory

• 4. Return the call of the hashtable method.

With jquery's $. Ajax (), you can easily call the background method of Asp.net.

[Webmethod] namespace

1. method calls without parameters. Note: 1. The method must be a static method and must have a [webmethod] Declaration.

Background <C #>:

 
Using system. Web. Script. Services; [webmethod] public static string sayhello () {return "Hello Ajax! ";}
 

Foreground <jquery>:

$ (Function () {$ ("# btnok "). click (function () {$. ajax ({// use the POST method type: "Post", // the page where the method is located and the URL of the method name: "data. aspx/sayhello ", contenttype:" application/JSON; charset = UTF-8 ", datatype:" JSON ", success: function (data) {// data is returned. d. Obtain the content alert (data. d) ;}, error: function (ERR) {alert (ERR) ;}}); // return false when the disabled button is submitted ;});});
 

2. Call methods with Parameters

Background <C #>:

 
Using system. Web. Script. Services; [webmethod] public static string getstr (string STR, string str2) {return STR + str2 ;}
 

Foreground <jquery>:

$ (Function () {$ ("# btnok "). click (function () {$. ajax ({type: "Post", URL: "data. aspx/getstr ", // The method for passing parameters must be correct. STR is the name of the form parameter, and str2 is the name of the second form parameter data:" {'str ': 'I am', 'str2': 'xxx'} ", contenttype:" application/JSON; charset = UTF-8 ", datatype:" JSON ", success: function (data) {// The returned data uses data. d. Obtain the content alert (data. d) ;}, error: function (ERR) {alert (ERR) ;}}); // return false when the disabled button is submitted ;});});
 

3. Call the Array Method

Background <C #>:

 
Using system. web. script. services; [webmethod] public static list <string> getarray () {list <string> li = new list <string> (); For (INT I = 0; I <10; I ++) Li. add (I + ""); Return Li ;}
 

foreground :

$ (Function () {$ ("# btnok "). click (function () {$. ajax ({type: "Post", URL: "data. aspx/getarray ", contenttype:" application/JSON; charset = UTF-8 ", datatype:" JSON ", success: function (data) {// clear ul $ ("# list" ).html ("") before insertion; // recursively obtain data $ (data. d ). each (function () {// Insert the result to li $ ("# List "). append ("<li>" + This + "</LI>") ;}); alert (data. d) ;}, error: function (ERR) {alert (ERR) ;}}); // return false when the disabled button is submitted ;});}); /// <Reference Path = "jquery-1.4.2-vsdoc.js"/> $ (function () {$ ("# btnok "). click (function () {$. ajax ({type: "Post", URL: "data. aspx/getarray ", contenttype:" application/JSON; charset = UTF-8 ", datatype:" JSON ", success: function (data) {// clear ul $ ("# list" ).html ("") before insertion; // recursively obtain data $ (data. d ). each (function () {// Insert the result to li $ ("# List "). append ("<li>" + This + "</LI>") ;}); alert (data. d) ;}, error: function (ERR) {alert (ERR) ;}}); // return false when the disabled button is submitted ;});});

4. Return the call of the hashtable method.

Background <C #>:

 
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 ;}
 

Foreground <jquery>:

$ (Function () {$ ("# btnok "). click (function () {$. ajax ({type: "Post", URL: "data. aspx/gethash ", // remember to add double quotation marks t_t data:" {'key': 'hahaha', '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: function (ERR) {alert (ERR + "Err ");}}); // return false when the disabled button is submitted ;});});
 

5. Operate XML

Xmltest. xml: View plaincopy to clipboardprint? <? XML version = "1.0" encoding = "UTF-8"?> <DATA> <item> <ID> 1 </ID> <Name> qwe </Name> </item> <ID> 2 </ID> <Name> ASD </Name> </item> </data> <? XML version = "1.0" encoding = "UTF-8"?> <DATA> <item> <ID> 1 </ID> <Name> qwe </Name> </item> <ID> 2 </ID> <Name> ASD </Name> </item> </data>
 

Foreground <jquery>:

 $ (function () {$ ("# btnok "). click (function () {$. ajax ({URL: "xmltest. XML ", datatype: 'xml', // The returned type is XML, which is different from the preceding JSON. Success: function (XML) {// clear list $ ("# list" ).html (""); // search for XML elements $ (XML ). find ("data> item "). each (function () {$ ("# List "). append ("
 ID:" + $ (this ). find ("ID "). text () + "
"); $ ("# List "). append ("
 name:" + $ (this ). find ("name "). text () + "
") ;}, error: function (result, status) {// if there is no above capture error, the callback function alert (Status) ;}} will be executed here; // return false when the disabled button is submitted ;});});