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文件中调用js的实现方法小结
Oct 23 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
AngularJS的ng-click传参的方法
Jun 19 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
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
解析coreseek for sphinx的使用
2013/06/21 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
validator验证控件使用代码
2010/11/23 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
智能电子应届生求职信
2013/11/10 职场文书
大专学生推荐信范文
2013/11/19 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
操行评语大全
2014/04/30 职场文书
英文求职信范文
2014/05/23 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书