jQuery使用Ajax方法调用WebService.docx
《jQuery使用Ajax方法调用WebService.docx》由会员分享，可在线阅读，更多相关《jQuery使用Ajax方法调用WebService.docx（7页珍藏版）》请在冰豆网上搜索。
jQuery使用Ajax方法调用WebService
jQuery使用Ajax方法调用WebService
在这里将jQuery使用Ajax调用WebService的几个常用的方法做了一个整理，提供给正在找这方面内容的博友，希望能给学习jQuery的朋友一点帮助。
代码直接复制即可。
ws.aspx代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
.hover
{
cursor:
pointer;/*小手*/
background:
#ffc;/*背景*/
}
.button
{
width:
150px;
float:
left;
text-align:
center;
margin:
10px;
padding:
10px;
border:
1pxsolid#888;
}
#dictionary
{
text-align:
center;
font-size:
18px;
clear:
both;
border-top:
1pxsolid#888;
}
#loading
{
border:
1px#000solid;
background-color:
#eee;
padding:
20px;
margin:
100px00200px;
position:
absolute;
display:
none;
}
#switcher
{
}
//无参数调用
$（document）.ready（function（）{
$（'#btn1'）.click（function（）{
$.ajax（{
type:
"POST",//访问WebService使用Post方式请求
contentType:
"application/json",//WebService会返回Json类型
url:
"WebService1.asmx/HelloWorld",//调用WebService的地址和方法名称组合----WsURL/方法名
data:
"{}",//这里是要传递的参数，格式为data:
"{paraName:
paraValue}",下面将会看到
dataType:
'json',
success:
function（result）{//回调函数，result，返回值
$（'#dictionary'）.append（result.d）;
}
}）;
}）;
}）;
//有参数调用
$（document）.ready（function（）{
$（"#btn2"）.click（function（）{
$.ajax（{
type:
"POST",
contentType:
"application/json",
url:
"WebService1.asmx/GetWish",
data:
"{value1:
'心想事成',value2:
'万事如意',value3:
'牛牛牛',value4:
2009}",
dataType:
'json',
success:
function（result）{
$（'#dictionary'）.append（result.d）;
}
}）;
}）;
}）;
//返回集合（引用自网络，很说明问题）
$（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（"|"））;
}）;
}
}）;
}）;
}）;
//返回复合类型
$（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（"|"））;
}）;
}
}）;
}）;
}）;
//返回DataSet（XML）
$（document）.ready（function（）{
$（'#btn5'）.click（function（）{
$.ajax（{
type:
"POST",
url:
"WebService1.asmx/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:
function（result,status）{//如果没有上面的捕获出错会执行这里的回调函数
if（status=='error'）{
alert（status）;
}
}
}）;
}）;
}）;
//Ajax为用户提供反馈，利用ajaxStart和ajaxStop方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调
//但对与Ajax的监控，本身是全局性的
$（document）.ready（function（）{
$（'#loading'）.ajaxStart（function（）{
$（this）.show（）;
}）.ajaxStop（function（）{
$（this）.hide（）;
}）;
}）;
//鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
$（document）.ready（function（）{
$（'div.button'）.hover（function（）{
$（this）.addClass（'hover'）;
},function（）{
$（this）.removeClass（'hover'）;
}）;
}）;
jQuery的WebServices调用
HelloWorld