jquery calls the WebService implementation code _jquery

An example to say the best:
1. aspx:

Copy Code code as follows:

<div class= "button" id= "BTN1" ><a href= "#" >HelloWorld</div>
<div class= "button" id= "btn2" ><a href= "#" > Incoming 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= "#" > Return DataSet (XML) </a></div>
</div><div id= "Loading" > Server processing, please later </div>
<div id= "dictionary" ></div>

2, in WebService:

Copy Code code as follows:

[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
To allow the use of ASP.net AJAX to invoke this Web service from a script, uncomment the downlink.
[System.Web.Script.Services.ScriptService]///If you want to invoke WebService with jquery, cancel the previous comment
public class WebService:System.Web.Services.WebService
{
Public WebService ()
{
If you are using a design component, uncomment it to follow the line
InitializeComponent ();
}
[WebMethod]
public string HelloWorld ()
{
Return to "Hello World";
}
[WebMethod]
public string Getwish (string value1, String value2, string value3, int value4)
{
return string. Format ("I wish you in {3} years {0}, {1}, {2}", Value1, value2, Value3, value4);
}
[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 = "The Ox is auspicious";
return A;
}
[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"] = "good luck";
Dt. Rows.Add (DR);
Ds. Tables.add (DT);
return DS;
}
}
Custom class with only two properties
public class Class1
{
public string ID {get; set;}
public string Value {get; set;}
}

3, JS in:

Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >
No parameters
$ (function () {
$ ("#btn1"). Click (function () {
$.ajax ({
Type: "POST",//Access WebService use POST method request
ContentType: "Application/json;utf-8",//webservice returns JSON type
URL: "Webservice.asmx/helloworld",//Calling WebService method
Data: "{}",//parameters to pass, must be written when no arguments are passed
DataType: "JSON",
Success:function (Result) {
Result =result.d;//Returns the JSON content after D
$ ("#dictionary"). Append (result);
}
});
});
});
With parameters
$ (function () {
$ ("#btn2"). Click (function () {
$.ajax ({
Type: "POST",
ContentType: "Application/json;utf-8",
URL: "Webservice.asmx/getwish",
Data: "{value1: ' Good luck ', value2: ' All things are done ', Value3: ' Fortunes rolling ', value4:2009}",
DataType: "JSON",
Success:function (Result) {
Result =result.d;
$ ("#dictionary"). HTML (result);
}
});
});
});
Return collection
$ (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 () + "");
});
}
});
});
});
return entity
$ (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 ',//return type is XML, and the preceding JSON, not the same
Success:function (Result) {
Demo Capture
try {
$ (Result). Find ("Table1"). each (function () {
$ (' #dictionary '). Append ($ (this). Find ("ID"). Text () + "" + $ (a). Find ("Value"). Text ());
});
}
catch (e) {
Alert (e); Return
}
},
Error:function (result, status) {//If no above catch error will execute the callback function here
if (Status = = ' Error ') {
alert (status);
}
}
});
});
});
Ajax provides feedback to users, using the Ajaxstart and Ajaxstop methods to demonstrate Ajax tracking callbacks to related events, and their two methods can be added to the JQuery object before and after Ajax callback//But monitoring with Ajax is itself global
$ (document). Ready (function () {
$ (' #loading '). Ajaxstart (function () {
$ (this). Show ();
}). Ajaxstop (function () {
$ (this). Hide ();
});
});
When you move the mouse over the effect, multiple elements, you can use "," separated
$ (document). Ready (function () {
$ (' Div.button '). Hover (function () {
$ (this). addclass (' hover ');
}, function () {
$ (this). Removeclass (' hover ');
});
});
</script>

4, the effect