WS. aspx code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "head1" runat = "server">
<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">
// 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: "webservice1.asmx/helloworld", // address and method name combination of 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: "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: "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: "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', // 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 ();
});
});
// 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>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div id = "switcher">
<H2>
Jquery WebServices call </H2>
<Div class = "button" id = "btn1">
Helloworld </div>
<Div class = "button" id = "btn2">
Input parameters </div>
<Div class = "button" id = "btn3">
Return set </div>
<Div class = "button" id = "btn4">
Return compound type </div>
<Div class = "button" id = "btn5">
Return dataset (XML) </div>
</Div>
<Div id = "loading">
Processing the server. Please wait.
</Div>
<Div id = "dictionary">
</Div>
</Form>
</Body>
</Html>
WebService1.asmx. cs
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. Services;
Using System. Data;
Namespace jQuery. Learning
{
/// <Summary>
/// Summary of WebService1
/// </Summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
[System. ComponentModel. ToolboxItem (false)]
// To allow ASP. net ajax to call this Web service from a script, cancel the comments to the downstream.
[System. Web. Script. Services. ScriptService]
Public class WebService1: System. Web. Services. WebService
{
/// <Summary>
/// No parameters
/// </Summary>
/// <Returns> </returns>
[WebMethod]
Public string HelloWorld ()
{
Return "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 ("Wish you {0}, {1}, {2}", value1, value2, value3, value4 in {3} years );
}
/// <Summary>
/// Return the set
/// </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>
/// Return a composite type
/// </Summary>
/// <Returns> </returns>
[WebMethod]
Public Class1 GetClass ()
{
Return new Class1 {ID = "1", Value = ""};
}
/// <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"] = "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 ;}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
