Jquery + Ajax call webService

To implement ajax calls in webService, add the following code:

// To allow ASP. net ajax to call this Web service from a script, cancel the comments to the downstream.
[System. Web. Script. Services. ScriptService]

Code download

 

Code

// Call without Parameters
$ (Document). ready (function (){
$ ('# Btn1'). click (function (){
$. Ajax ({
Type: "POST", // WebService access request using Post
ContentType: "application/json", // WebService returns the Json type
Url: WebServiceURL + "WebService1.asmx/HelloWorld", // address and method name combination for WebService call ---- WsURL/method name
Data: "{}", // here is the parameter to be passed, in the format of data: "{paraName: paraValue}", as shown below
DataType: 'json ',
Success: function (result) {// callback function, result, Return Value
$ ('# Dictionary'). append (result. d );
}
});
});
});

// Call with Parameters
$ (Document). ready (function (){
$ ("# Btn2"). click (function (){
$. Ajax ({
Type: "POST ",
ContentType: "application/json ",
Url: WebServiceURL + "WebService1.asmx/GetWish ",
Data: "{value1: 'wishful thinking ', value2: 'Good luck', value3: 'niu Niu ', value4: 2009 }",
DataType: 'json ',
Success: function (result ){
$ ('# Dictionary'). append (result. d );
}
});
});
});

// Return the Set (referenced from the network, which is very helpful)
$ (Document). ready (function (){
$ ("# Btn3"). click (function (){
$. Ajax ({
Type: "POST ",
ContentType: "application/json ",
Url: WebServiceURL + "WebService1.asmx/GetArray ",
Data: "{I: 10 }",
DataType: 'json ',
Success: function (result ){
$ (Result. d). each (function (){
// Alert (this );
$ ('# Dictionary'). append (this. toString () + "");
// Alert (result. d. join ("| "));
});
}
});
});
});

// Return the composite type
$ (Document). ready (function (){
$ ('# Btn4'). click (function (){
$. Ajax ({
Type: "POST ",
ContentType: "application/json ",
Url: WebServiceURL + "WebService1.asmx/GetClass ",
Data :"{}",
DataType: 'json ',
Success: function (result ){
$ (Result. d). each (function (){
// Alert (this );
$ ('# Dictionary'). append (this ['id'] + "" + this ['value']);
// Alert (result. d. join ("| "));
});

}
});
});
});

// Return DataSet (XML)
$ (Document). ready (function (){
$ ('# Btn5'). click (function (){
$. Ajax ({
Type: "POST ",
Url: WebServiceURL + "WebService1.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. The ajaxStart and ajaxStop methods are used to demonstrate callback for ajax tracking related events. The two methods can be added to jQuery objects before and after Ajax callback.
// However, Ajax monitoring is global.
$ (Document). ready (function (){
$ ('# Loading'). ajaxStart (function (){
$ (This). show ();
}). AjaxStop (function (){
$ (This). hide ();
});
});