jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

168 阅读 0 评论 111 点赞

我是靠谱客的博主碧蓝小蝴蝶，最近开发中收集的这篇文章主要介绍jQuery AJAX实现调用页面后台方法和web服务定义的方法分享，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;
3.无参数的方法调用.大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码：

复制代码代码如下:

 
[WebMethod] 
public static string SayHello() 
{ 
return "Hello Ajax!"; 
} 

JS代码：

复制代码代码如下:

 
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
//要用post方式 
type: "Post", 
//方法所在页面和方法名 
url: "Demo.aspx/SayHello", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
//返回的数据用data.d获取内容 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); 

//禁用按钮的提交 
return false; 
}); 
}); 

页面代码：

复制代码代码如下:

 
<form id="form1" runat="server"> 
<div> 
<asp:Button ID="btnOK" runat="server" Text="验证用户" /> 
</div> 
</form> 

3.有参数方法调用
后台代码：

复制代码代码如下:

 
[WebMethod] 
public static string GetStr(string str, string str2) 
{ 
return str + str2; 
} 

JS代码：

复制代码代码如下:

 
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.aspx/GetStr", 
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字 
data: "{'str':'我是','str2':'XXX'}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
//返回的数据用data.d获取内容 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); 

//禁用按钮的提交 
return false; 
}); 
}); 

运行效果如下：

4.返回数组方法
后台代码：

复制代码代码如下:

 
[WebMethod] 
public static List<string> GetArray() 
{ 
List<string> li = new List<string>(); 

for (int i = 0; i < 10; i++) 
li.Add(i + ""); 

return li; 
} 

JS代码：

复制代码代码如下:

 
$(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.aspx/GetArray", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
//插入前先清空ul 
$("#list").html(""); 

//递归获取数据 
$(data.d).each(function() { 
//插入结果到li里面 
$("#list").append("<li>" + this + "</li>"); 
}); 

alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); 

//禁用按钮的提交 
return false; 
}); 
}); 