Jquery. Method parsing of the Ajax () method calling ASP.

Using jquery's $.ajax () makes it easy to invoke the ASP.
Let's start with a simple example and warm up.

1. Method calls without parameters
ASP. NET code:

Using System.Web.Script.Services;   [WebMethod]   public static string SayHello ()   {        return "Hello ajax!";   }  Using System.Web.Script.Services; [Webmethod]public static string SayHello () {     return "Hello ajax!";}

Note: 1. Methods must be static methods, and must have [WebMethod] declaration

JQuery Code:

<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () {$ ("#btnOK"). Click (function () {$.ajax ({//To post with type: "POST",//Method page and method name URL: "Data.aspx/sayhello" , ContentType: "Application/json; Charset=utf-8 ", DataType:" JSON ", success:function (data) {/////returned with DATA.D get               Content alert (DATA.D);               }, Error:function (err) {alert (ERR);           }           });       Disables the button's commit return false;   });  });            <reference path= "jquery-1.4.2-vsdoc.js"/>$ (function () {$ ("#btnOK"). Click (function () {$.ajax ({ To post with type: "POST",//Method page and method name URL: "Data.aspx/sayhello", Contentt ype: "Application/json; Charset=utf-8 ", DataType:" JSON ", success:function (data) {///returnTA.D Get Content alert (DATA.D);            }, Error:function (err) {alert (ERR);        }        });    Disables the button's commit return false; });});

Results:

2. Method calls with parameters
ASP. NET code:

Using System.Web.Script.Services;   [WebMethod]   public static string Getstr (String str, string str2)   {       return str + str2;   }  Using System.Web.Script.Services; [Webmethod]public static string Getstr (String str, string str2) {    return str + str2;}

JQuery Code:

<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () {$ ("#btnOK"). Click (function () {$.ajax               ({type: "Post", url: "Data.aspx/getstr",//method The notation of the parameter must be the same, STR is the name of the parameter, and STR2 is the name of the second parameter.) Data: "{' str ': ' I am ', ' str2 ': ' XXX '}", ContentType: "Application/json; Charset=utf-8 ", DataType:" JSON ", success:function (data) {/////returned with DATA.D get               Content alert (DATA.D);               }, Error:function (err) {alert (ERR);           }           });       Disables the button's commit return false;   });  });            <reference path= "jquery-1.4.2-vsdoc.js"/>$ (function () {$ ("#btnOK"). Click (function () {$.ajax ({ Type: "Post", url: "Data.aspx/getstr",//method The notation of the parameter must be the same, 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 ", success:function (data) {/////returned with DATA.D for content            alert (DATA.D);            }, Error:function (err) {alert (ERR);        }        });    Disables the button's commit return false; });});

Operation Result:

Enter the advanced application Luo

3. Call to return array method
ASP. NET code:

Using System.Web.Script.Services;   [WebMethod]   public static list<string> GetArray ()   {       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> ();    for (int i = 0; i <; i++)        Li. ADD (i + "");    return Li;}

JQuery Code:

<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) {//before inserting, clear ul                   $ ("#list"). HTML (""); Recursively gets the data $ (DATA.D). each (function () {///insert result into Li inside $ ("#list").                   Append ("<li>" + This + "</li>");                   });               alert (DATA.D);               }, Error:function (err) {alert (ERR);           }           });       Disables the button's commit return false;   });  });            <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) {//before inserting, clear ul                $ ("#list"). HTML (""); Recursively gets the data $ (DATA.D). each (function () {//insert result into Li inside $ ("#list"). Append ("&                Lt;li> "+ this +" </li> ");                });            alert (DATA.D);            }, Error:function (err) {alert (ERR);        }        });    Disables the button's commit return false; });});

Operation Result:

4. Call to return Hashtable method
ASP. NET code:

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:

<reference path= "Jquery-1.4.2-vsdoc.js"/> $ (function () {$ ("#btnOK"). Click (function () {$.ajax ({type: "Post", url: "Data.aspx/gethash",//Remember to add double quotes t_t 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:function (err) {alert (err + "err");           }           });       Disables the button's commit return false;   });  });            <reference path= "jquery-1.4.2-vsdoc.js"/>$ (function () {$ ("#btnOK"). Click (function () {$.ajax ({ Type: "Post", url: "Data.aspx/gethash",//Remember to add double quotes t_t 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:function (err) {alert (err + "err");        }        });    Disables the button's commit return false; });});

Operation Result:

5. Manipulating XML
Xmltest.xml:

<?xml version= "1.0" encoding= "Utf-8"?>  <data>    <item>      <id>1</id>      <name>qwe</name>    </item>    <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>  < item>    <id>2</id>    <name>asd</name>  </item></data>

JQuery Code:

$ (function () {$ ("#btnOK"). Click (function () {$.ajax ({url: "xmltest.xml", dat                   Atype: ' xml ',//return type is XML, and previous JSON, not the same success:function (XML) {//Empty list                   $ ("#list"). HTML ("");                       Find XML Elements KVM online shopping brush website Construction Beijing Express Company Ultrasonic Welding machine $ (XML). Find ("Data>item"). each (function () {                       $ ("#list"). Append ("<li>id:" + $ (this). FIND ("id"). Text () + "</li>");                   $ ("#list"). Append ("<li>name:" + $ (this). Find ("Name"). Text () + "</li>"); })}, Error:function (result, status) {///If there is a catch error above, the callback function here will be executed alert (status               );           }           });       Disables the button's commit return false;   });  }); $ (function () {$ ("#btnOK"). Click (function () {$.ajax ({url: "Xmltest.xml", DataType: ' xml ' ,//The type returned is XML, and the previous JSON, not the same success: function (XML) {//Empties list $ ("#list"). HTML (""); Finds the XML element $ (XML). Find ("Data>item"). each (function () {$ ("#list"). Append ("<li>id:                    "+ $ (this)." Find ("id"). Text () + "</li>");                $ ("#list"). Append ("<li>name:" + $ (this). Find ("Name"). Text () + "</li>");            })}, Error:function (result, status) {///If there is an error above the capture, the callback function here will be executed alert (status);        }        });    Disables the button's commit return false; });});

[10.121.158.27:4002] Too Many user code to run When-usercode_in_pthread are on