Jquery Ajax调用aspx页面方法
在asp.net webform开发中，用jQuery ajax传值一般有几种玩法
1）普通玩法：通过一般处理程序ashx进行处理；
2）高级玩法：通过aspx.cs中的静态方法+WebMethod进行处理；
3）文艺玩法：通过WCF进行处理。
第一种和第三种方法不在本文介绍范围之内，下面重点介绍第二种方法。
说明
在我们的印象里 asp.net的Web服务是以.asmx来结尾的，而我们现在的asp.net也能实现Web服务，这是因为默认Web.config中已经添加了System.Web.Handlers.ScriptModule，它是用于管理asp.net中ajax功能的HTTP模块，这样不管用户是请求.asmx文件还是.aspx文件，都会通过此处理程序来处理请求。
后台代码：
using System.Web.Services; //引入命名空间
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
前台页面代码：
<form id="form1" runat="server">
<div>
<asp:Button ID="btn" runat="server" Text="验证用户" />
</div>
</form>
Javascript代码：
$(function() {
$("#btn").click(function() {
$.ajax({
type: "post", //要用post方式
url: "Demo.aspx/SayHello",//方法所在页面和方法名
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data.d);//返回的数据用data.d获取内容
},
error: function(err) {
alert(err);
}
});
});
});
效果：
需要注意的地方
一、data参数写法
//1）普通写法，JSON键值对，如：单个参数的
data:"{newsID:"+ id +"}",
//多个参数的形式：
data:"{newsID:"+ newsID +",name:"+ name +"}",
//2）文艺写法：各种引号，双引号，单引号拼接，如
//单个参数写法：
data:"{'name':'"+ name +"'}",
//多个参数写法：
data: "{'content':'" + $("#content").val() + "','createTime':'" + $("#createTime").val() + "','creator':'" + $("#creator").val() + "'}"
//容易出错！！！！！
二、用QueryString传值是后台取不到的问题
在WebMethod()方法中，是不能通过 HttpContext.Current.QueryString.Get("id")来获取query string，
因为在WebMethod()默认是用POST方法提交的，而用GetQueryString是不能取到值的。
替代方法是用JS获取url中的参数，用ajax提交给后台方法是用：
< script type = "text/javascript" >
function getArgs(strParame) {
var args = new Object();
var query = location.search.substring(1); // Get query string
var pairs = query.split("&"); // Break at ampersand
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('='); // Look for "name=value"
if (pos == -1) continue; // If not found, skip
var argname = pairs[i].substring(0, pos); // Extract the name
var value = pairs[i].substring(pos + 1); // Extract the value
value = decodeURIComponent(value); // Decode it, if needed
args[argname] = value; // Store as a property
}
return args[strParame]; // Return the object
} < /script>
三、时间问题
WCF 或 模拟Web服务处理JSON时返回时间格式问题。解决方法如下：
// 杂乱的时间
var rawDate = "/Date(1347120000000+0800)/";
// 提取时间字符串
var strDate = rawDate.substr(6, 13);
// 把时间字符串转化成int类型
var intDate = parseInt(strDate);
// 构造一个Date对象
var newDate = new Date(intDate);
// 将时间转化成当地时间格式
var myDate = newDate.toLocaleDateString();
// 最终结果
alert(myDate);
// 合并成一句
var resultDate = new Date(parseInt("/Date(1347120000000+0800)/".substr(6, 13))).toLocaleDateString();
四、$.ajax参数详解
//标准的写法：
$.ajax({
type: "post",
dataType: "json",
contentType: "application/json", //注意：WebMethod()必须加这项，否则客户端数据不会传到服务端
data:{如上所述},//注意：data参数可以是string个int类型
url: "List.aspx/DeleteNews",//模拟web服务，提交到方法
// 可选的 async:false,阻塞的异步就是同步
beforeSend:function(){
// do something.
// 一般是禁用按钮等防止用户重复提交
$("#btnClick").attr({disabled:"disabled"});
// 或者是显示loading图片
},
success: function (data) {
alert("success: " + data.d);//注意这里：必须通过data.d才能获取到服务器返回的值
// 服务端可以直接返回Model，也可以返回序列化之后的字符串，如果需要反序列化：string json = JSON.parse(data.d);
// 有时候需要嵌套调用ajax请求，也是可以的
},
complete: function(){
//do something.
$("#btnClick").removeAttr("disabled");
// 隐藏loading图片
}，
error: function (data) {
alert("error: " + data.d);
}
});
