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判断选择的时间是否大于今天的代码
Aug 20 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
js控制div弹出层实现方法
May 11 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
33道php常见面试题及答案
2015/07/06 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python reduce 函数使用详解
2017/12/05 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
售后主管岗位职责
2013/12/08 职场文书
实践单位评语
2014/04/26 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
班子四风对照检查材料
2014/08/21 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
卖车协议书范例
2014/09/16 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
团干部培训班心得体会
2016/01/06 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python