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图片画廊插件 推荐
May 12 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 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
我的群发邮件程序
2006/10/09 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
js实现彩色条纹滚动条效果
2017/03/15 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python中的__slots__使用示例
2015/02/26 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python Flask-web表单使用详解
2017/11/18 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
中考冲刺决心书
2014/03/11 职场文书
学校门卫岗位职责
2014/03/16 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
营销与策划实训报告
2014/11/05 职场文书
给客户的检讨书
2014/12/21 职场文书
七年级作文之游记
2019/12/11 职场文书