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与iframe交互实现代码
Dec 24 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
vue组件系列之TagsInput详解
May 14 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
Python实现的弹球小游戏示例
2017/08/01 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
酒店员工培训方案
2014/06/02 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android