Jquery. Ajax () method calls the ASP.net backend method parsing

  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 () {    $ ("#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)    { &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);            }         });          //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",   &nbsp         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   &nbsp ;                 $ ("#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)    {&nbsp ;      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!" '} ',             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       &nbsp   $ ("#list"). HTML ("");                   //Find XML elements   KVM online shopping Brush website Construction Beijing Express Company Ultrasonic Welding Machine &nbsp ;               $ (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);               }          &nbsp });             //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;    }); });