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 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
javascript自执行函数
Feb 10 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python读取Excel实例详解
2018/08/17 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
python中append函数用法讲解
2020/12/11 Python
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
小学班级口号
2014/06/09 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
学生逃课检讨书
2015/02/17 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python