Jquery.ajax () calling the ASP. NET Background method

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

C # backend Code:

Using System.Web.Services; [WebMethod]    public static string Sayhi ()    {        return ' hi,welcome to china! ';}

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

HTML code:

<div>        <asp:button id= "Btnclick" runat= "Server" text= "click me"/>        <br/> <span        id= " Msg "></span> </div>

jquery Code:

<script type= "Text/javascript" >        $ (document). Ready (        function () {            $ ("#btnClick"). Bind ("click", function () {                $.ajax ({                    type: "Post",                    URL: "Ajaxhandler.aspx/sayhi",                    contentType: "Application/json; Charset=utf-8 ",                    dataType:" JSON ",                    success:function (data) {                        $ (" #msg "). CSS (" Color "," #0000FF "). HTML ( DATA.D);                    },                    error:function (err) {                        $ ("#msg"). CSS ("Color", "#FF0000"). HTML ("Access Faield:" + err);                    }                });                return false;            }    ); </script>

Operation Result:

The data format returned by JSON can be clearly seen through firebug, so it is DATA.D when fetching data.

2. Method calls with parameters

C # backend Code:

[WebMethod]    public static string Sayhi (string address, string name)    {        return "Hi," + address + "" + Name;    }

HTML code:

<div>        <asp:button id= "Btnclick" runat= "Server" text= "click me"/>        address:<asp:textbox id= " Txtaddress "runat=" server "></asp:TextBox>        family name:<asp:textbox id=" txtname "runat=" Server "> </asp:TextBox>        <br/>        <span id= "MSG" ></span></div>

jquery Code:

<script type= "Text/javascript" >        $ (document). Ready (        function () {            $ ("#btnClick"). Bind ("click", function () {                var add = $ ("#txtAddress"). Val ();                var txtname = $ ("#txtName"). Val ();                $.ajax ({                    type: "Post",                    URL: "Ajaxhandler.aspx/sayhi",                    data: "{' Address ': '" + add + "', ' name ': '" + txtname + ") '} ',                    contentType: "Application/json; Charset=utf-8 ",                    dataType:" JSON ",                    success:function (data) {                        $ (" #msg "). CSS (" Color "," #0000FF "). HTML ( DATA.D);                    },                    error:function (err) {                        $ ("#msg"). CSS ("Color", "#FF0000"). HTML ("Access Faield:" + err);                    }                });                return false;            }    ); </script>

Run results

3. Returns the call of the list collection method

C # backend Code:

[WebMethod]    public static list<string> Sayhi (string address, string name)    {        list<string> List = new list< String> ();        for (int i = 0; i <; i++)        {            list. Add ("Hi:" + i.tostring ());        }        List. Add ("Hi:" + address + "+ name");        return list;}

HTML code:

<div>        <asp:button id= "Btnclick" runat= "Server" text= "click me"/>        address:<asp:textbox id= " Txtaddress "runat=" server "></asp:TextBox>        family name:<asp:textbox id=" txtname "runat=" Server " ></asp:TextBox>        <br/>        <ul id= "msg" >        </ul></div>

jquery Code:

<script type= "Text/javascript" > $ (document). Ready (function () {$ ("#btnClick"). Bind ("click"                , function () {var add = $ ("#txtAddress"). Val ();                var txtname = $ ("#txtName"). Val (); $.ajax ({type: "post", url: "Ajaxhandler.aspx/sayhi", Data: "{' Ad Dress ': ' + add + ' ', ' name ': ' + txtname + ' '} ', ContentType: ' Application/json; Charset=utf-8 ", DataType:" JSON ", success:function (data) {$                        ("#msg"). HTML ("");                        $ (DATA.D). each (function () {$ ("#msg"). Append ("<li>" + This + "</li>");                        });                    $ ("#msg"). CSS ("Color", "#0000FF"); }, Error:function (ERR) {$ ("#msg"). CSS ("Color", "#FF0000"). HTML ("Access Faield:                  "+ err);  }                });            return false;        });    }); </script>

Operation Result:

4. Call to return sortedlist<tkey,tvalue> method

C # backend Code:

[WebMethod]    public static sortedlist<string, string> Sayhi (string address, string name)    {        sortedlist<string, string> SL = new sortedlist<string, string> ();        for (int i = 0; i <; i++)        {            sl. ADD (i.tostring () + "_key", i.tostring () + "_value");        }        Sl. ADD ("_key", "_value" + address + "" + name);        return SL;    }

HTML code:

<div>        <asp:button id= "Btnclick" runat= "Server" text= "click me"/>        address:<asp:textbox id= " Txtaddress "runat=" server "></asp:TextBox>        family name:<asp:textbox id=" txtname "runat=" Server "> </asp:TextBox>        <br/>        <ul id= "msg" >        </ul></div>

jquery Code:

<script type= "Text/javascript" > $ (document). Ready (function () {$ ("#btnClick"). Bind ("click"                , function () {var add = $ ("#txtAddress"). Val ();                var txtname = $ ("#txtName"). Val (); $.ajax ({type: "post", url: "Ajaxhandler.aspx/sayhi", Data: "{' Ad Dress ': ' + add + ' ', ' name ': ' + txtname + ' '} ', ContentType: ' Application/json; Charset=utf-8 ", DataType:" JSON ", success:function (data) {$                        ("#msg"). HTML ("");                        Here only the partial key, the value displays $ ("#msg"). Append ("<li>" + data.d["0_key"] + "</li>");                        $ ("#msg"). Append ("<li>" + data.d["1_key"] + "</li>");                        $ ("#msg"). Append ("<li>" + data.d["2_key"] + "</li>"); $ ("#msg"). Append ("<li>" + data.d["_key"] + "&LT;/LI&Gt; ");                    $ ("#msg"). CSS ("Color", "#0000FF"); }, Error:function (ERR) {$ ("#msg"). CSS ("Color", "#FF0000"). HTML ("Access Faield:                    "+ err);                }                });            return false;        });    }); </script>

Operation Result:

5. Manipulating XML

XML File Code:

<?xml version= "1.0" encoding= "Utf-8"?><books> <book> <name>asp.net 3.5 Advanced Programming (2nd edition) </n Ame> <author> McDonnelburth Studios </author> <wordCount>2034000</wordCount> &LT;PRICE&G T;76</price> </book> <book> <name>asp.net 3.5 Getting Started classic </name> <author> ( Netherlands) Spangas (spaanjaars,i.)    </author> <wordCount>1046000</wordCount> <price>78.5</price> </book>        <book> <name>c# Advanced Programming (5th Edition) up and down </name> <author> (US) Nagel (NAGEL.C) </author>        <wordCount>24770000</wordCount> <price>124</price> </book> <book> <name>asp.net Ajax Combat </name> <author> (US) McClure, (US) General Gravicius, (US) oher wait </author> <wordcou nt>511000</wordcount> <price>44</price> </book> <book> <name>as P.NET program Development example (C #) (2nd edition) </name> <author> Zhang Yue, Suyu, Guan Wei Red </author> &LT;WORDCOUNT&GT;1419000&LT;/WORDC Ount> <price>71.2</price> </book></books>

HTML code:

<div>        <asp:button id= "Btnclick" runat= "Server" text= "click me"/>        address:<asp:textbox id= " Txtaddress "runat=" server "></asp:TextBox>        family name:<asp:textbox id=" txtname "runat=" Server "> </asp:TextBox>        <br/>        <ul id= "msg" >        </ul></div>

jquery Code:

<script type= "Text/javascript" > $ (document). Ready (function () {$ ("#btnClick"). Bind ("click"                    , function () {$.ajax ({url: "books.xml", DataType: "xml",                        Success:function (XmlData) {$ ("#msg"). HTML ("");                            $ (xmlData). Find ("Books>book"). each (function () {$ ("#msg"). Append ("====new book====");                            $ ("#msg"). Append ("<li>name:" + $ (this). Find ("name"). Text () + "</li>");                            $ ("#msg"). Append ("<li>author:" + $ (this). Find ("Author"). Text () + "</li>");                            $ ("#msg"). Append ("<li>wordcount:" + $ (this). Find ("WordCount"). Text () + "</li>");                        $ ("#msg"). Append ("<li>price:" + $ (this). Find ("price"). Text () + "</li>");                        }); $ ("#msg"). CSS ("Color", "#0000FF "); }, Error:function (ERR) {$ ("#msg"). CSS ("Color", "#FF0000"). HTML ("Access Faield:                    "+ err);                }                });            return false;        });    }); </script>

Operation Result: