jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
Posted net-sky
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法相关的知识,希望对你有一定的参考价值。
1.jquery.ajax请求aspx
请求aspx的静态方法要注意一下问题:
(1)aspx的后台方法必须静态,而且添加webmethod特性
(2)在ajax方法中contentType必须是“application/json”,
(3)data传递的数据必须是严格的json数据,如"{\'a\':\'aa\',\'b\':\'bb\'}",而且参数必须和静态方法的参数一 一对应
(4)aspx的后台方法返回的数据默认形式是“{\'d\':\'返回的内容\'}”,所以如果dataType指定为"json"必须通过data.d来获取返回数据
在webfrom页面中后台定义请求方法(方法必须静态,而且必须添加WebMethod特性)
[WebMethod] public static string GetString(string str_a,string str_b) { return str_a+str_b; }
前台页面请求
$(function(){ $.jax({ url:\'default.aspx/GetString\', type:\'post\', contentType:\'application/json\',//这里必须指明要传递到服务器的内容的编码方式,而且必须是json,否则后台方法获取不到传递数据。 dataType:\'json\',//客户端以json的方式去读取返回数据 data:\'{\'str_a\':\'aaa\',\'str_b\':\'bbbb\'}\',//参数必须和后台的参数名称一样 data必须传递json格式的数据 success:function(result){ alert(result.d);//因为webmethod的方法默认返回的数据格式是json的格式而且数据格式如:"{\'d\':\'返回的数据\'}",所以要通过.d来获取返回的内容。 } }); });
2.请求ashx
注意问题:
(1)ajax方法中的contentType如果指定必须指定为“application/x-www-form-urlencoded”,否则在ashx中request.form获取不到数据
(2)如果dataType为json,想要jQuery自动解析json数据,ashx必须返回严格的json数据,而且必须是双引号(用反义字符去反义)的格式,如: context.Response.Write("{\\"d\\":\\"Hello World\\"}"),否则jquery会解析json失败。
(3)如果因为contentType未设置或者不是“application/x-www-urlencoded”类型,reque.form获取不到数据,可以通过context.Request.InputStream来获取请求内容。
(4)在请求ashx中data参数有这几种形式: data:{\'a\':\'aa\',\'b\':\'bb\'}, data:"a=aa&b=bb",data:{a:\'aa\',b:\'bb\'},这三种数据都可以通过request.form[""]来获取到。
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!"; }
前台页面代码:
<button id="btn">提交</button>
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传值是后台取不到的问题
< 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); } });
以上是关于jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法的主要内容,如果未能解决你的问题,请参考以下文章