Implementation Code for jQuery to call WebService

The following is an example:
1. In aspx:
Copy codeThe Code is as follows:
<Div class = "button" id = "btn1"> <a href = "#"> HelloWorld </div>
<Div class = "button" id = "btn2"> <a href = "#"> input parameters </a> </div>
<Div class = "button" id = "btn3"> <a href = "#"> return set </a> </div>
<Div class = "button" id = "btn4"> <a href = "#"> return compound type </a> </div>
<Div class = "button" id = "btn5"> <a href = "#"> DataSet (XML) </a> </div>
</Div> <div id = "loading"> processing on the server. Please wait. </div>
<Div id = "dictionary"> </div>

2. In WebService:
Copy codeThe Code is as follows:
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
// To allow ASP. net ajax to call this Web service from a script, cancel the comments to the downstream.
[System. Web. Script. Services. ScriptService] // If jquery is used to call WebService, cancel the preceding comment.
Public class WebService: System. Web. Services. WebService
{
Public WebService ()
{
// If you use the designed component, uncomment the following line
// InitializeComponent ();
}
[WebMethod]
Public string HelloWorld ()
{
Return "Hello World ";
}
[WebMethod]
Public string GetWish (string value1, string value2, string value3, int value4)
{
Return string. Format ("Wish you {0}, {1}, {2}", value1, value2, value3, value4 in {3} years );
}
[WebMethod]
Public List <int> GetArray (int I)
{
List <int> list = new List <int> ();
While (I> = 0)
{
List. Add (I --);
}
Return list;
}
[WebMethod]
Public Class1 GetClass ()
{
Class1 a = new Class1 ();
A. ID = "1 ";
A. Value = "";
Return;
}
[WebMethod]
Public DataSet GetDataSet ()
{
DataSet ds = new DataSet ();
DataTable dt = new DataTable ("Table1 ");
Dt. Columns. Add ("ID", Type. GetType ("System. String "));
Dt. Columns. Add ("Value", Type. GetType ("System. String "));
DataRow dr = dt. NewRow ();
Dr ["ID"] = "1 ";
Dr ["Value"] = "Happy New Year ";
Dt. Rows. Add (dr );
Dr = dt. NewRow ();
Dr ["ID"] = "2 ";
Dr ["Value"] = "everything goes well ";
Dt. Rows. Add (dr );
Ds. Tables. Add (dt );
Return ds;
}
}
// Custom class with only two attributes
Public class Class1
{
Public string ID {get; set ;}
Public string Value {get; set ;}
}

3. JS:
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript">
// No Parameters
$ (Function (){
$ ("# Btn1"). click (function (){
$. Ajax ({
Type: "POST", // webservice access request using POST
ContentType: "application/json; UTF-8", // WebService returns the Json type
Url: "WebService. asmx/HelloWorld", // call the WebService Method
Data: "{}", // The parameter to be passed. When no parameter is passed, you must enter
DataType: "json ",
Success: function (result ){
Result = result. d; // return the json content after d.
$ ("# Dictionary"). append (result );
}
});
});
});
// Parameters
$ (Function (){
$ ("# Btn2"). click (function (){
$. Ajax ({
Type: "POST ",
ContentType: "application/json; UTF-8 ",
Url: "WebService. asmx/GetWish ",
Data: "{value1: 'Good luck in all things ', value2: 'Success in all things', value3: 'lucky fortune ', value4: 2009 }",
DataType: "json ",
Success: function (result ){
Result = result. d;
$ ("# Dictionary" example .html (result );
}
});
});
});
// Return the set
$ (Function (){
$ ("# Btn3"). click (function (){
$. Ajax ({
Type: "POST ",
ContentType: "application/json; UTF-8 ",
Url: "WebService. asmx/GetArray ",
Data: "{I: 10 }",
DataType: "json ",
Success: function (result ){
Result = result. d;
$ (Result). each (function (){
$ ("# Dictionary"). append (this. toString () + "");
});
}
});
});
});
// Returns an object.
$ (Function (){
$ ("# Btn4"). click (function (){
$. Ajax ({
Type: "POST ",
ContentType: "application/json; UTF-8 ",
Url: "WebService. asmx/GetClass ",
Data :"{}",
DataType: 'json ',
Success: function (result ){
Result = result. d;
$ ("# Dictionary"). append (result. ID + "" + result. Value );
}
});
});
});
// Return DataSet (XML)
$ (Document). ready (function (){
$ ('# Btn5'). click (function (){
$. Ajax ({
Type: "POST ",
Url: "WebService. asmx/GetDataSet ",
Data :"{}",
DataType: 'xml', // The returned type is xml, which is different from the preceding Json.
Success: function (result ){
// Demonstrate capture
Try {
$ (Result). find ("Table1"). each (function (){
$ ('# Dictionary '). append ($ (this ). find ("ID "). text () + "" + $ (this ). find ("Value "). text ());
});
}
Catch (e ){
Alert (e); return;
}
},
Error: function (result, status) {// if no above capture error occurs, the callback function here will be executed
If (status = 'error '){
Alert (status );
}
}
});
});
});
// Ajax provides feedback to users, and uses the ajaxStart and ajaxStop methods to demonstrate ajax callback for tracking related events, the two methods can be added to the jQuery object before and after Ajax callback // but the monitoring on Ajax itself is global.
$ (Document). ready (function (){
$ ('# Loading'). ajaxStart (function (){
$ (This). show ();
}). AjaxStop (function (){
$ (This). hide ();
});
});
// Move the cursor to the removal effect. You can use commas (,) to separate multiple elements.
$ (Document). ready (function (){
$ ('Div. click'). hover (function (){
$ (This). addClass ('hover ');
}, Function (){
$ (This). removeClass ('hover ');
});
});
</Script>

4. Effect