jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码


Posted in Javascript onApril 27, 2011

ws.aspx 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title></title> 
<script src="jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
.hover 
{ 
cursor: pointer; /*小手*/ 
background: #ffc; /*背景*/ 
} 
.button 
{ 
width: 150px; 
float: left; 
text-align: center; 
margin: 10px; 
padding: 10px; 
border: 1px solid #888; 
} 
#dictionary 
{ 
text-align: center; 
font-size: 18px; 
clear: both; 
border-top: 3px solid #888; 
} 
#loading 
{ 
border: 1px #000 solid; 
background-color: #eee; 
padding: 20px; 
margin: 100px 0 0 200px; 
position: absolute; 
display: none; 
} 
#switcher 
{ 
} 
</style> 
<script type="text/javascript"> 
//无参数调用 
$(document).ready(function() { 
$('#btn1').click(function() { 
$.ajax({ 
type: "POST", //访问WebService使用Post方式请求 
contentType: "application/json", //WebService 会返回Json类型 
url: "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: "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: "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: "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(" | ")); 
}); 
} 
}); 
}); 
}); 
============== 
var aArray = [“sdf”,”dasd”,”dsa”]; //数组$.each(aArray,function(iNum,value){ document.write(“序号:”+iNum+” 值:”+value);});var oObj = {one:1,two:2,three:3};$.each(aArray,function(property,value){ document.write(“属性:”+ property +” 值:”+value);}); 
============================================== 
//返回DataSet(XML) 
$(document).ready(function() { 
$('#btn5').click(function() { 
$.ajax({ 
type: "POST", 
url: "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(); 
}); 
}); 
// 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开 
$(document).ready(function() { 
$('div.button').hover(function() { 
$(this).addClass('hover'); 
}, function() { 
$(this).removeClass('hover'); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="switcher"> 
<h2> 
jQuery 的WebServices 调用</h2> 
<div class="button" id="btn1"> 
HelloWorld</div> 
<div class="button" id="btn2"> 
传入参数</div> 
<div class="button" id="btn3"> 
返回集合</div> 
<div class="button" id="btn4"> 
返回复合类型</div> 
<div class="button" id="btn5"> 
返回DataSet(XML)</div> 
</div> 
<div id="loading"> 
服务器处理中,请稍后。 
</div> 
<div id="dictionary"> 
</div> 
</form> 
</body> 
</html>

WebService1.asmx.cs
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Data; 
namespace jQuery.Learning 
{ 
/// <summary> 
/// WebService1 的摘要说明 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.ComponentModel.ToolboxItem(false)] 
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
[System.Web.Script.Services.ScriptService] 
public class WebService1 : System.Web.Services.WebService 
{ 
/// <summary> 
/// 无参数 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public string HelloWorld() 
{ 
return "Hello World "; 
} 
/// <summary> 
/// 带参数 
/// </summary> 
/// <param name="value1"></param> 
/// <param name="value2"></param> 
/// <param name="value3"></param> 
/// <param name="value4"></param> 
/// <returns></returns> 
[WebMethod] 
public string GetWish(string value1, string value2, string value3, int value4) 
{ 
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
} 
/// <summary> 
/// 返回集合 
/// </summary> 
/// <param name="i"></param> 
/// <returns></returns> 
[WebMethod] 
public List<int> GetArray(int i) 
{ 
List<int> list = new List<int>(); 
while (i >= 0) 
{ 
list.Add(i--); 
} 
return list; 
} 
/// <summary> 
/// 返回一个复合类型 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public Class1 GetClass() 
{ 
return new Class1 { ID = "1", Value = "牛年大吉" }; 
} 
/// <summary> 
/// 返回XML 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public DataSet GetDataSet() 
{ 
DataSet ds = new DataSet(); 
DataTable dt = new DataTable(); 
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; } 
} 
}
Javascript 相关文章推荐
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 #Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 #Javascript
javascript中的继承实例代码
Apr 27 #Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 #Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 #Javascript
js实时监听文本框状态的方法
Apr 26 #Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 #Javascript
You might like
将php数组输出html表格的方法
2014/02/24 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python实现控制台进度条功能
2016/01/04 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
在python中画正态分布图像的实例
2019/07/08 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python 调用Google翻译接口的方法
2020/12/09 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
给排水工程师岗位职责
2013/11/21 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
情况说明书怎么写
2015/10/08 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js