A detailed example of the JQuery Ajax method call ASP.net WebService

This is very common, search for a blog park "Look for" and Google, see most are reproduced in one or two articles (and the source is not a blog park), some simply can not run, to the beginner's debugging and learning to bring inconvenient, I am here will be jquery Ajax call aspx.net WebService several commonly used methods to do a collation, provided to the people looking for this content, hope to be able to learn jquery friends a little help, you can directly copy the code to run.

Ws.aspx Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Jquery.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
. hover
{
Cursor:pointer; * * Small Hand/*
Background: #ffc; /* Background * *
}
. button
{
width:150px;
Float:left;
Text-align:center;
margin:10px;
padding:10px;
border:1px solid #888;
}
#dictionary
{
Text-align:center;
font-size:18px;
Clear:both;
BORDER-TOP:3PX solid #888;
}
#loading
{
border:1px #000 Solid;
Background-color: #eee;
padding:20px;
margin:100px 0 0 200px;
Position:absolute;
Display:none;
}
#switcher
{
}
</style>
<script type= "Text/javascript" >
No parameter calls
$ (document). Ready (function () {
$ (' #btn1 '). Click (function () {
$.ajax ({
Type: "POST",//Access WebService use POST method request
ContentType: "Application/json",//webservice returns JSON type
URL: "Webservice1.asmx/helloworld",//Calling WebService address and method name combination----Wsurl/Method name
Data: "{}",//here is the parameter to pass, format is data: "{paraname:paravalue}", you will see the following
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: "Webservice1.asmx/getwish",
Data: "{value1: ' All things are done ', value2: ' Good luck ', value3: ' Cattle and Cows ', value4:2009}",
DataType: ' JSON ',
Success:function (Result) {
$ (' #dictionary '). Append (RESULT.D);
}
});
});
});

Return collection (referenced from network, very descriptive)
$ (document). Ready (function () {
$ ("#btn3"). Click (function () {
$.ajax ({
Type: "POST",
ContentType: "Application/json",
URL: "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 compound type
$ (document). Ready (function () {
$ (' #btn4 '). Click (function () {
$.ajax ({
Type: "POST",
ContentType: "Application/json",
URL: "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: "Webservice1.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, both of which can be added to jquery objects before and after Ajax callbacks
But the monitoring of Ajax is in itself a 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>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Switcher" >
JQuery's webservices call <div class= "button" id= "BTN1" >
Helloworld</div>
<div class= "button" id= "BTN2" >
Incoming Parameters </div>
<div class= "button" id= "Btn3" >
Back to Collection </div>
<div class= "button" id= "Btn4" >
Return Compound type </div>
<div class= "button" id= "Btn5" >
Back to DataSet (XML) </div>
</div>
<div id= "Loading" >
Server processing, please later.
</div>
<div id= "dictionary" >
</div>
</form>
</body>