aspx后台调用前台jquery_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 stringSayHello()

{return "Hello Ajax!";

}

前台页面代码：

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" >

functiongetArgs(strParame) {var args = newObject();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 = newDate(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);

}

});