Jquery + Ajax调用webService实例代码(asp.net)


Posted in Javascript onAugust 27, 2010

webService中要实现ajax调用,则要加这句代码:
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
代码下载 /201008/yuanma/WebService2.rar

//无参数调用 
$(document).ready(function() { 
$('#btn1').click(function() { 
$.ajax({ 
type: "POST", //访问WebService使用Post方式请求 
contentType: "application/json", //WebService 会返回Json类型 
url: WebServiceURL + "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: WebServiceURL + "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: WebServiceURL + "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: WebServiceURL + "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: WebServiceURL + "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(); 
}); 
});
Javascript 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
在视频前插入广告
Nov 20 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 #Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 #Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 #Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 #Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 #Javascript
js中判断控件是否存在
Aug 25 #Javascript
JavaScript浏览器选项卡效果
Aug 25 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python打开使用的方法
2019/09/30 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
40岁生日感言
2014/02/15 职场文书
初三学习决心书
2014/03/11 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
怎样写离婚协议书
2015/01/26 职场文书
python基础之停用词过滤详解
2021/04/21 Python