JQuery AJAX请求aspx后台方法
利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点:
1、首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.Services;命名空间)
2、其次方法一定要是静态(static)方法。
下面我做了几个不同的调用后台方法的例子:
1、不带参数返回string方法
前台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //不带参数返回string方法 2 $.ajax({ 3 type: "post", 4 url: "后台返回json数组.aspx/hello", 5 contentType:"Application/json;charset=utf-8", 6 success: function (msg) { 7 alert(msg.d); 8 } 9 })
后台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /// <summary> 2 /// 不带参数返回字符串方法 3 /// </summary> 4 /// <returns></returns> 5 [WebMethod] 6 public static string hello() 7 { 8 return "hello world!"; 9 }
2、带参数返回string方法
前台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //带参数返回string方法 2 $.ajax({ 3 type: "post", 4 url: "后台返回json数组.aspx/sayHi", 5 data: "{\"name\":\"小明\",\"age\":\"18\"}", 6 contentType: "Application/json;charset=utf-8", 7 success: function (msg) { 8 alert(msg.d); 9 } 10 })
后台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /// <summary> 2 /// 带参数返回string方法 3 /// </summary> 4 /// <param name="name"></param> 5 /// <param name="age"></param> 6 /// <returns></returns> 7 [WebMethod] 8 public static string sayHi(string name ,int age) 9 { 10 return string.Format("大家好,我叫{0},我今年{1}岁了!",name,age); 11 }
3、后台返回LIST集合
前台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //后台返回LIST集合 2 $.ajax({ 3 type: "post", 4 url: "后台返回json数组.aspx/jiazai", 5 data: "{\"name\":\"小明\"}", 6 contentType: "Application/json; charset=utf-8", 7 //dataType:"json", 8 success: function (msg) { 9 $(msg.d).each(function () { 10 alert(this); 11 }) 12 } 13 })
后台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /// <summary> 2 /// 带参数返回集合方法 3 /// </summary> 4 /// <param name="name"></param> 5 /// <returns></returns> 6 [WebMethod] 7 public static List<string> jiazai(string name) 8 { 9 List<string> ls = new List<string>(); 10 ls.Add(name); 11 return ls; 12 }
最后添加一个标准的写法:前台的额
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //标准的写法: 2 $.ajax({ 3 type: "post", 4 dataType: "json", 5 contentType: "application/json", //注意:WebMethod()必须加这项,否则客户端数据不会传到服务端 6 data:{如上所述},//注意:data参数可以是string个int类型 7 url: "List.aspx/DeleteNews",//模拟web服务,提交到方法 8 // 可选的 async:false,阻塞的异步就是同步 9 beforeSend:function(){ 10 // do something. 11 // 一般是禁用按钮等防止用户重复提交 12 $("#btnClick").attr({disabled:"disabled"}); 13 // 或者是显示loading图片 14 }, 15 success: function (data) { 16 alert("success: " + data.d);//注意这里:必须通过data.d才能获取到服务器返回的值 17 // 服务端可以直接返回Model,也可以返回序列化之后的字符串,如果需要反序列化:string json = JSON.parse(data.d); 18 // 有时候需要嵌套调用ajax请求,也是可以的 19 }, 20 complete: function(){ 21 //do something. 22 $("#btnClick").removeAttr("disabled"); 23 // 隐藏loading图片 24 }, 25 error: function (data) { 26 alert("error: " + data.d); 27 } 28 });