JQuery Ajax call ASP.net webservers Implementation code _ Practical Tips

ASPX page code

Copy Code code as follows:

<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;
}
　　
--></style><style type= "Text/css" bogus= "1" ><!--
. 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;
}
　　
--></style><style type= "Text/css" bogus= "1" bogus= "1" >.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;
}
</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>

Webservice1.asmx Code

Copy Code code as follows:

Using System;
Using System.Collections;
Using System.ComponentModel;
Using System.Data;
Using System.Linq;
Using System.Web;
Using System.Web.Services;
Using System.Web.Services.Protocols;
Using System.Xml.Linq;
Using System.Collections.Generic;
Namespace Jquery_learning
{
<summary>
Summary description of WebService1
</summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
[System.ComponentModel.ToolboxItem (False)]
To allow the use of ASP.net AJAX to invoke this Web service from a script, uncomment the downlink.
[System.Web.Script.Services.ScriptService]
public class WebService1:System.Web.Services.WebService
{
<summary>
No parameters
</summary>
<returns></returns>
[WebMethod]
public string HelloWorld ()
{
Return to "Hello World";
}
<summary>
With parameters
</summary>
<param name= "Value1" ></param>
<param name= "value2" ></param>
<param name= "Value3" ></param>
<param name= "Value4" ></param>
<returns></returns>
[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);
}
<summary>
Return collection
</summary>
<param name= "I" ></param>
<returns></returns>
[WebMethod]
Public list<int> GetArray (int i)
{
list<int> list = new list<int> ();
while (i >= 0)
{
List. ADD (i--);
}
return list;
}
<summary>
Returns a composite type
</summary>
<returns></returns>
[WebMethod]
Public Class1 GetClass ()
{
return new Class1 {ID = "1", Value = "Auspicious of the Ox"};
}
<summary>
return XML
</summary>
<returns></returns>
[WebMethod]
Public DataSet GetDataSet ()
{
DataSet ds = new DataSet ();
DataTable dt = new DataTable ();
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;}
}
}