The jquery. Ajax () method calls the method parsing of Asp. Net backend _ jquery

This article focuses on jquery. ajax () method call Asp. net background method is introduced. If you need a friend, you can refer to it and hope to help you use JQuery's $. ajax () can easily call the background method of asp.net.
Let's start with a simple instance warm-up.

1. method call without Parameters
Asp.net 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 and must have a [WebMethod] statement.

JQuery code:

The Code is as follows:

///
$ (Function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
// Use the post Method
Type: "Post ",
// Method page and method name
Url: "data. aspx/SayHello ",
ContentType: "application/json; charset = UTF-8 ",
DataType: "json ",
Success: function (data ){
// Use data. d to obtain the returned data.
Alert (data. d );
},
Error: function (err ){
Alert (err );
}
});

// Disable button submission
Return false;
});
});
///
$ (Function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
// Use the post Method
Type: "Post ",
// Method page and method name
Url: "data. aspx/SayHello ",
ContentType: "application/json; charset = UTF-8 ",
DataType: "json ",
Success: function (data ){
// Use data. d to obtain the returned data.
Alert (data. d );
},
Error: function (err ){
Alert (err );
}
});

// Disable button submission
Return false;
});
});

Result:

2. Call methods with Parameters
Asp.net 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:

The Code is as follows:

///
$ (Function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
Type: "Post ",
Url: "data. aspx/GetStr ",
// Method parameters must be written correctly. 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 ){
// Use data. d to obtain the returned data.
Alert (data. d );
},
Error: function (err ){
Alert (err );
}
});

// Disable button submission
Return false;
});
});
///
$ (Function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
Type: "Post ",
Url: "data. aspx/GetStr ",
// Method parameters must be written correctly. 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 ){
// Use data. d to obtain the returned data.
Alert (data. d );
},
Error: function (err ){
Alert (err );
}
});

// Disable button submission
Return false;
});
});

Running result:

Go to advanced application

3. Call the Array Method
Asp.net code:

The Code is as follows:

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

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 insertion
$ ("# List" ).html ("");

// Recursively retrieve data
$ (Data. d). each (function (){
// Insert the result to li
$ ("# List"). append ("

"+ This +"

");
});

Alert (data. d );
},
Error: function (err ){
Alert (err );
}
});

// Disable button submission
Return false;
});
});
///
$ (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 insertion
$ ("# List" ).html ("");

// Recursively retrieve data
$ (Data. d). each (function (){
// Insert the result to li
$ ("# List"). append ("

"+ This +"

");
});

Alert (data. d );
},
Error: function (err ){
Alert (err );
}
});

// Disable button submission
Return false;
});
});

Running result:

4. Return the call of the Hashtable method.
Asp.net 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:

The Code is as follows:

///
$ (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 ");
}
});

// Disable button submission
Return false;
});
});
///
$ (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 ");
}
});

// Disable button submission
Return false;
});
});

Running result:

5. Operate xml
XMLtest. xml:

The Code is as follows:

1
Qwe


2
Asd





1
Qwe


2
Asd

JQuery code:

The Code is as follows:

$ (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 the list
$ ("# List" ).html ("");
// Search for xml elements KVM online shopping brush website construction Beijing Express Company Ultrasonic Welding Machine
$ (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 no above capture error occurs, the callback function here will be executed
Alert (status );
}
});

// Disable button submission
Return false;
});
});
$ (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 the 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 no above capture error occurs, the callback function here will be executed
Alert (status );
}
});

// Disable button submission
Return false;
});
});