jsp ajax 调用 ashx,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

秒速五厘米 2022-09-03 11:17 188阅读 0赞

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;

前台页面请求

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

$(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来获取返回的内容。

\});

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

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\[""\]来获取到。

在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文件，都会通过此处理程序来处理请求。

后台代码：

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

using System.Web.Services; //引入命名空间

\[WebMethod\]

public static string SayHello()

return "Hello Ajax!";

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

前台页面代码：

提交

Javascript代码：

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

$(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);

\});

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

效果：

![fd4c1ff6e45b4c67a585a9d86ba4c478.jpg][]

需要注意的地方

一、data参数写法

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

//1)普通写法，JSON键值对，如：单个参数的

data:"\{newsID:"+ id +"\}",

//多个参数的形式：

data:"\{newsID:"+ newsID +",name:"+ name +"\}",

//2)文艺写法：各种引号，双引号，单引号拼接，如

//单个参数写法：

data:"\{\\'name\\':\\'"+ name +"\\'\}",

//多个参数写法：

data: "\{\\'content\\':\\'" + $("\#content").val() + "\\',\\'createTime\\':\\'" + $("\#createTime").val() + "\\',\\'creator\\':\\'" + $("\#creator").val() + "\\'\}"

//容易出错！！！！！

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

二、用QueryString传值是后台取不到的问题

在WebMethod()方法中，是不能通过 HttpContext.Current.QueryString.Get("id")来获取query string，

因为在WebMethod()默认是用POST方法提交的，而用GetQueryString是不能取到值的。

替代方法是用JS获取url中的参数，用ajax提交给后台方法是用：

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

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

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

三、时间问题

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

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();

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

四、$.ajax参数详解

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

//标准的写法：

$.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);

\});

![a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg][]

[a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg]: https://img.136.la/20210528/a4bfb2a1ea7a4ef58896c4c1f02e50d7.jpg
[fd4c1ff6e45b4c67a585a9d86ba4c478.jpg]: https://img.136.la/20210528/fd4c1ff6e45b4c67a585a9d86ba4c478.jpg