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 相关文章推荐
js function定义函数的几种不错方法
Feb 27 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
nodejs文件夹深层复制功能
2019/09/03 NodeJs
微信小程序wx.request的简单封装
2019/11/13 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Django 外键的使用方法详解
2019/07/19 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
电气自动化自荐信
2013/10/10 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
中专毕业生自荐信
2013/11/16 职场文书
园艺师求职信
2014/04/27 职场文书
温馨提示标语
2014/06/26 职场文书
党员剖析材料范文
2014/09/30 职场文书
安全伴我行主题班会
2015/08/13 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库