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