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冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
vue路由插件之vue-route
Jun 13 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
如何优化vue打包文件过大
Apr 13 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
php数组键值用法实例分析
2015/02/27 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
python使用xmlrpc实例讲解
2013/12/17 Python
Python压缩和解压缩zip文件
2015/02/14 Python
用Python写冒泡排序代码
2016/04/12 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python实现人工蜂群算法
2020/09/18 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
实习报告评语
2014/04/26 职场文书
小学班主任培训方案
2014/06/04 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
酒会开场白大全
2015/06/01 职场文书