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 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
js转换对象为xml
Feb 17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序实现评论功能
Nov 28 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 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
杏林同学录(五)
2006/10/09 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
公交公司毕业生求职信
2014/02/15 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年环卫工作总结
2015/04/28 职场文书
网络研修随笔感言
2015/11/18 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
24年收藏2000多部退役军用电台
2022/02/18 无线电
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript