With jquery's $. Ajax (), you can easily call the background method of Asp.net.
1. method call without Parameters
Asp.net code:
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:
$ (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:
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
Jquery code:
// <Reference Path = "jquery-1.4.2-vsdoc.js"/>
$ (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:
using System.Web.Script.Services;
[WebMethod]
public static List<string> GetArray()
{
List<string> li = new List<string>();
for (int i = 0; i < 10; i++)
li.Add(i + "");
return li;
}
Jquery code:
// <Reference Path = "jquery-1.4.2-vsdoc.js"/>
$ (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 ("<li>" + This + "</LI> ");
});
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:
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:
// <Reference Path = "jquery-1.4.2-vsdoc.js"/>
$ (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:
<?xml version="1.0" encoding="utf-8" ?>
<data>
<item>
<id>1</id>
<name>qwe</name>
</item>
<item>
<id>2</id>
<name>asd</name>
</item>
</data>
Jquery code:
$ (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 ("<li> ID:" + $ (this ). find ("ID "). text () + "</LI> ");
$ ("# List "). append ("<li> name:" + $ (this ). find ("name "). text () + "</LI> ");
})
},
Error: function (result, status) {// if no above capture error occurs, the callback function here will be executed
Alert (Status );
}
});
// Disable button submission
Return false;
});
});
Running result: