jQuery调用WebService的实现代码


Posted in Javascript onJune 19, 2011

一个例子说尽:
1、.aspx中:

<div class="button" id="btn1"><a href="#">HelloWorld</div> 
<div class="button" id="btn2"><a href="#">传入参数</a></div> 
<div class="button" id="btn3"><a href="#">返回集合</a></div> 
<div class="button" id="btn4"><a href="#">返回复合类型</a></div> 
<div class="button" id="btn5"><a href="#">返回DataSet(XML)</a></div> 
</div><div id="loading">服务器处理中,请稍后</div> 
<div id="dictionary"></div>

2、WebService中:
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
[System.Web.Script.Services.ScriptService] //如果要用jquery调用WebService则取消前面的注释 
public class WebService : System.Web.Services.WebService 
{ 
public WebService() 
{ 
//如果使用设计的组件,请取消注释以下行 
//InitializeComponent(); 
} 
[WebMethod] 
public string HelloWorld() 
{ 
return "Hello World"; 
} 
[WebMethod] 
public string GetWish(string value1, string value2, string value3, int value4) 
{ 
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
} 
[WebMethod] 
public List<int> GetArray(int i) 
{ 
List<int> list = new List<int>(); 
while (i >= 0) 
{ 
list.Add(i--); 
} 
return list; 
} 
[WebMethod] 
public Class1 GetClass() 
{ 
Class1 a = new Class1(); 
a.ID = "1"; 
a.Value = "牛年大吉"; 
return a; 
} 
[WebMethod] 
public DataSet GetDataSet() 
{ 
DataSet ds = new DataSet(); 
DataTable dt = new DataTable("Table1"); 
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"] = "新年快乐"; 
dt.Rows.Add(dr); 
dr = dt.NewRow(); 
dr["ID"] = "2"; 
dr["Value"] = "万事如意"; 
dt.Rows.Add(dr); 
ds.Tables.Add(dt); 
return ds; 
} 
} 
//自定义的类,只有两个属性 
public class Class1 
{ 
public string ID { get; set; } 
public string Value { get; set; } 
}

3、JS中:
<script language="javascript" type="text/javascript"> 
//无参数 
$(function() { 
$("#btn1").click(function() { 
$.ajax({ 
type: "POST", //访问webservice使用POST方式请求 
contentType: "application/json;utf-8", //WebService会返回Json类型 
url: "WebService.asmx/HelloWorld", //调用WebService方法 
data: "{}", //要传递的参数,没有传参时,也一定要写上 
dataType: "json", 
success: function(result) { 
result =result.d;//返回d后面的json内容 
$("#dictionary").append(result); 
} 
}); 
}); 
}); 
//有参数 
$(function() { 
$("#btn2").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json;utf-8", 
url: "WebService.asmx/GetWish", 
data: "{value1:'万事如意',value2:'心想事成',value3:'财运滚滚',value4:2009}", 
dataType: "json", 
success: function(result) { 
result =result.d; 
$("#dictionary").html(result); 
} 
}); 
}); 
}); 
//返回集合 
$(function() { 
$("#btn3").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json;utf-8", 
url: "WebService.asmx/GetArray", 
data: "{i:10}", 
dataType: "json", 
success: function(result) { 
result =result.d; 
$(result).each(function() { 
$("#dictionary").append(this.toString() + " "); 
}); 
} 
}); 
}); 
}); 
//返回实体 
$(function() { 
$("#btn4").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json;utf-8", 
url: "WebService.asmx/GetClass", 
data: "{}", 
dataType: 'json', 
success: function(result) { 
result =result.d; 
$("#dictionary").append(result.ID + " " + result.Value); 
} 
}); 
}); 
}); 
//返回DataSet(XML) 
$(document).ready(function() { 
$('#btn5').click(function() { 
$.ajax({ 
type: "POST", 
url: "WebService.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'); 
}); 
}); 
</script>

4、效果
jQuery调用WebService的实现代码
Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 #Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 #Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 #Javascript
用Juery网页选项卡实现代码
Jun 13 #Javascript
读jQuery之三(构建选择器)
Jun 11 #Javascript
读jQuery之二(两种扩展)
Jun 11 #Javascript
读jQuery之一(对象的组成)
Jun 11 #Javascript
You might like
php print EOF实现方法
2009/05/21 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python 列表的清空方式
2020/01/13 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python configparser模块应用过程解析
2020/08/14 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
机电一体化求职信
2014/03/10 职场文书
司仪主持词两篇
2014/03/22 职场文书
保护环境标语
2014/06/09 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
死亡证明书样本说明
2014/10/18 职场文书
阳光体育运动标语口号
2015/12/26 职场文书