jQuery AJax调用asp.net webservers的实现代码_.net

aspx页面代码

 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head 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; 
} 
　　 
--></style><style type="text/css" bogus="1"><!-- 
.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; 
} 
　　 
--></style><style type="text/css" bogus="1" bogus="1">.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; 
} 
　　</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(" | ")); 
　　　　　　　　　　　　}); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}); 
　　　　}); 
　　　　//返回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 代码

复制代码代码如下:

 
using system; 
using system.collections; 
using system.componentmodel; 
using system.data; 
using system.linq; 
using system.web; 
using system.web.services; 
using system.web.services.protocols; 
using system.xml.linq; 
using system.collections.generic; 
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; } 
} 
} 