《jQuery使用Ajax方法调用WebService》由会员分享,可在线阅读,更多相关《jQuery使用Ajax方法调用WebService(32页珍藏版)》请在金锄头文库上搜索。
1、jQuery 使用 Ajax 方法调用 WebService在这里将 jQuery 使用 Ajax 调用 WebService 的几个常用的方法做了一个 整理,提供给正在找这方面内容的博友,希望能给学习 jQuery 的朋友一点帮助。ws.aspx 代码 hovercursor: point er; /* 小手 */ background: #ffc; /*背景*/buttonwidth: 150px;float: left;text-align: center;margin: 10px;padding: 10px;border: 1px solid #888;#dictionarytext-
2、align: center;font-size: 18px;clear: both;border-top: 3px solid #888;#loadingborder: 1px #000 solid;background-color: #eee;padding: 20px;margin: 100px 0 0 200px;position: absolute;display: none;#switcher/无参数调用$(document)ready(function() $#btn1)click(funetion() $ajax(typePOST, /访问 WebService 使用 Post方
3、式请求contentType: application/json,/WebService 会返回 Json 类型url: WebServicel.asmx/HelloWorld, /调用WebService的地址和方法名称组合WsURL/方法名data: ,/这里是要传递的参数,格式为 da ta: paraName:paraValue,下面将会看到dataType: json,success f unction( resul t) /回调函数,result,返回值$(#dictionary)append(resultd););););/有参数调用$(document)ready(functi
4、on() $#btn2)click(funetion() $ajax(type POST,content Type applica tion/jso n, urlWebService1asmx/GetWish,data valuel:心想事成,value2:万事如意,value3:牛牛牛,value4:2009,dataType json, success function(result) #dictionary)append(resultd););););/返回集合(引用自网络,很说明问题)$(document)ready(function() $#btn3)click(funetion()
5、 $ajax(type POST,content Type applica tion/jso n, urlWebServicelasmx/GetArray, datai:10,dataType json, success function(result) $(resultd)eacfunction() /alert(this);$(#dictionary).append(thistoString() + );/alert(resultdjoin( | );););););/返回复合类型$(document)ready(function() $#btn4)click(funetion() $aj
6、ax(type POST,content Type applica tion/jso n, urlWebService1asmx/GetClass, data,dataType json, success function(result) $(resultd)eacfunction() /alert(this);$(#dictionary).append(thisID + + thisValue); /alert(resultdjoin( | );););););/返回 DataSet(XML)$(document)ready(function() $#btn5)click(funetion(
7、) $ajax(type POST,urlWebServicelasmx/GetDataSet, data,dataType xml, /返回的类型为XML,和前面的Json,不一样了success: function(result) /演示一下捕获try $(result)find(Table1).each(function() $(#dictionary).append($(this)find(ID)text() + +$(this).find(Value).text(););catch (e) alert(e);return;,error f unction( resul t, stat
8、 us) /如果没有上面的捕获出错会执行这里的回调函数if (status = error) alert(status););););/Ajax为用户提供反馈,利用ajaxStart和ajaxStop方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象 在Ajax前后回调/但对与Ajax的监控,本身是全局性的$(document)ready(function() $#loading)ajaxStart(function。$this)show();)ajaxStopfunction() $this).hide();););/鼠标移入移出效果,多个元素的时候,可以使用“,”
9、隔开$(document)ready(function() $div.button)hover(funetion() $this)addClass(hover);,function() $this)removeClass(hover);););h2jQuery 的 WebServices 调用div class=button id=btn1HelloWorlddiv class=button id=btn2 传入参数div class=button id=btn3返回集合div class=button id=btn4 返回复合类型div class=button id=btn5 返回 Dat
10、aSet(XML)服务器处理中,请稍后。WebService1.asmx.csusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Data;namespace jQuery.Learning/ / WebServicel的摘要说明/ WebService(Namespace = http:/tempuri.org/)WebServiceBinding(ConformsTo =WsiProfiles Basic
11、Profile1_1)System.ComponentModel.ToolboxItem(false)/若要允许使用ASP .NET AJAX从脚本中调用此Web服务,请取消对下行的注释。System.Web.ScriptServices ScriptServicepublic class WebServicel :System.Web.Services.WebService/ /无参数/ / /returnsWebMethodpublic string HelloWorld()return Hello World ;/ /带参数/ / / / / / /returnsWebMethodpublic string GetWish(string valuel, string value2,string value3, int value4)ret urn st ri ng. Forma t(祝您在3年里0、1、2,value1, value2, value3, value4);/