JQuery AJAX: Call the page background method and web Service definition method sharing

1. Create a demo. aspx page.
2. Add references to the background file demos. aspx. cs on the page.

Using System. Web. Services;
3. method call without parameters. You must note that this version cannot be lower than. net framework 2.0. 2.0 is not supported.
Background code:Copy codeThe Code is as follows: [WebMethod]
Public static string SayHello ()
{
Return "Hello Ajax! ";
}

JS Code:Copy codeThe Code is as follows: $ (function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
// Use the post Method
Type: "Post ",
// Method page and method name
Url: "Demo. 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;
});
});

Page code:Copy codeThe Code is as follows: <form id = "form1" runat = "server">
<Div>
<Asp: Button ID = "btnOK" runat = "server" Text = "verify user"/>
</Div>
</Form>

3. Call methods with Parameters
Background code:Copy codeThe Code is as follows: [WebMethod]
Public static string GetStr (string str, string str2)
{
Return str + str2;
}

JS Code:Copy codeThe Code is as follows: $ (function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
Type: "Post ",
Url: "demo. 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;
});
});

The running effect is as follows:

4. Return Array Method
Background code:

Copy codeThe Code is as follows: [WebMethod]
Public static List <string> GetArray ()
{
List <string> li = new List <string> ();

For (int I = 0; I <10; I ++)
Li. Add (I + "");

Return li;
}

JS Code:Copy codeThe Code is as follows: $ (function (){
$ ("# BtnOK"). click (function (){
$. Ajax ({
Type: "Post ",
Url: "demo. 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 diagram: