The jquery.Ajax() method calls Asp.Net background method analysis_jquery

Using JQuery’s $.ajax() can easily call asp.net’s background methods.
Let’s warm up with a simple example first.

1. Method call without parameters
asp.net code:

Copy code The code is as follows:

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. The method must be static method, and it must have the declaration of [WebMethod]

$(function() {
$("#btnOK").click(function() {

$.ajax({                                                                                                                                                                                                                contentType: "application/ json; charset=utf-8",                                                                                                              (data.d ); 🎜> //Disable button submission return false;  }); });​​​​and method name url: "data.aspx/SayHello",

contentType: "application/json; charset=utf-8",

dataType: "json",
: function(data success ) {
                                                                               ​​alert(err);
        }
       });

                                                                                                                                                                                        
Result:

2. Method call with parameters
asp.net code:

Copy code The code is as follows:

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:

Copy code The code is as follows:

///
$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
      url: "data.aspx/GetStr",                                                                                                                                                                                                                                   using  'str':'I am','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
                                                                                                                                                                                                                                               🎜> alert(err );                                                    $(function() {
$("#btnOK").click(function() {
$.ajax( { Type: "Post",
URL: "Data.aspx/GetStr",
// The method of passing parameters must be right, STR is the name of the parameter, STR2 is the second shape Parameter name
data: "{'str':'I am','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType : "json",
success: function(data) {
//The returned data is obtained using data.d error: function (err) {
                    alert(err);
                                                                                                                                                                                        
Run result:

Enter advanced applications below

3. Call to return array method
asp.net code:

Copy code The code is as follows:

using System.Web.Script.Services;

[WebMethod]
public static List GetArray()
{
List< ;string> li = new List();

for (int i = 0; i < 10; i )
li.Add(i "");

return li;
}
using System.Web.Script.Services;

[WebMethod]
public static List GetArray()
{
List li = new List();

for (int i = 0; i < 10; i )
li.Add(i "");

return li;
}

JQuery code:

Copy code The code is as follows :

///
$(function() {
$("#btnOK").click( function() {
$.ajax({
type: "Post",
url: "data.aspx/GetArray",
contentType: "application/json; charset=utf-8" ,
dataType: "json",
success: function(data) {
//Clear ul before inserting
$("#list").html("");

                                                                                                         ("#list").append("< li>" this ""); error: function(err) {
alert(err);                                                                                                   // /
$(function() {
$("#btnOK").click(function() {
$ .ajax({
       type: "Post",
                                                                                                                                                                              ",
success: function(data) {

                                                                                                                                                                 .append("< li>" this "");
              });

              alert(data.d); 🎜> });

                                                                                                                                                                                        
Run result:

4. Return the call to the Hashtable method
asp.net code:

Copy code The code is 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:

Copy code The code is as follows:

///
$(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"]); >                                                                                                                                                                          );
});
///
$(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 ​​= alert("key: haha ​​= => " data.d["haha"] "n key: www ==> " data.d["www"]);
           },
                error: function(err) {
alert(err "err");
         }
           });

                                                                                                                                                                                        
运行结果：

5、操作xml
XMLtest.xml:

复制代码 代码如下:

 
 
   
    1 
    qwe 
   
   
    2 
    asd 
   
 


 
    1
    qwe
 
 
    2
    asd
 

JQuery code:

复制代码 代码如下:

$(function() {
$("#btnOK").click(function() {
$.ajax({
url: "XMLtest.xml",
dataType: 'xml', //The returned type is XML, which is different from the previous Json
success: function(xml) {
success: function(xml) {
//Clear the 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("

Name:" $(this).find("name").text() "

"); , 
             error: function(result, status) { //If there is no above captured error, the callback function here will be executed                                                                                                    >
//Disable button submission
return false;
});
});
$(function() {
$("#btnOK").click(function() {
                                                                                                                                                                                                                                      ; function(xml) {
                                                                                                                             . > item").each(function() {
                                                                        li>");
                                                                                            ​
         })
          },
              error: function(result, status) { //If there is no capture error above, the callback function here will be executed
                                                                                                       }
});