ashx文件获取$.ajax()方法发送的数据


Posted in Javascript onMay 26, 2016

今天在使用Jquery的ajax方法发送请求时,发现在后台中使用ashx文件无法接收到ajax方法中传递的参数,上网查了一下原因后发现了问题所在,原来是我在$.ajax方法中指明了"contentType: 'application/json; charset=utf8'",所以才导致了在ashx文件中处理请求时无法获取传递到服务器端的参数,

正确的写法如下:

$.ajax({
url: '/Handler.ashx?operFlag=test',
type: 'POST',
/*
请求ashx文件的时候 要把contentType去掉,还有就是
data 格式为 {”key”,”value”};切记 不要再 大括号外面加双引号,
这样就会在ashx页面取不到数据而失败
*/
//contentType: 'application/json; charset=utf',
data: {
"key": "xdp",
"key":"孤傲苍狼" 
},
cache: false,
dataType: 'text',
success: function (data) {
alert(data);
},
error: function (xhr) {
alert("出现错误,请稍后再试:" + xhr.responseText);
}
});

这样在ashx文件中就可以使用如下的代码来获取$.ajax方法传递的参数了,代码如下:

string key = context.Request["key"];
string key = context.Request["key"];

以前一直都是用$.post方法来处理ajax,所以没有注意到这个问题,而这次由于是项目需要,所以就使用了$.ajax,没想到就遇到了上述的问题,好在找出了问题所在并且及时解决了问题。

另外,最近还遇到了一个奇怪的问题,"用ajax提交数据到ashx后,用JSON.stringify格式化参数后在服务器端取不到值?",代码如下:

$.ajax({
url: '/Handler.ashx?operFlag=test',
type: 'POST',
//JSON.stringify格式化参数
data: JSON.stringify({
"key": "xdp-gacl",
"key": "白虎神皇"
}),
contentType: 'application/json; charset=utf',
cache: false,
dataType: 'json',
success: function (data) {
alert(data.key + "|" + data.key);
},
error: function (xhr) {
alert("出现错误,请稍后再试:" + xhr.responseText);
}
});

结果在ashx中使用context.Request["key3"]这种常规的方式是获取不到参数的,如下图所示:

ashx文件获取$.ajax()方法发送的数据

郁闷了好久,怎么也想不明白为什么会这样,一开始以为是多了contentType: 'application/json; charset=utf8'这句代码造成的,于是把这句代码注释掉:

$.ajax({
url: '/Handler.ashx?operFlag=test',
type: 'POST',
//JSON.stringify格式化参数
data: JSON.stringify({
"key": "xdp-gacl",
"key": "白虎神皇"
}),
//contentType: 'application/json; charset=utf',
cache: false,
dataType: 'json',
success: function (data) {
alert(data.key + "|" + data.key);
},
error: function (xhr) {
alert("出现错误,请稍后再试:" + xhr.responseText);
}
});

可是结果还是一样的,使用context.Request["key3"]还是获取不到参数,没办法,既然常规的方式获取不到,那就另寻他法吧,百度了一下,找到了解决办法,在ashx中使用如下的方式就可以获取到了,首先写一个通用的获取参数的方法,代码如下:

/// <summary>
/// 获取参数
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
private Dictionary<String, Object> GetParameter(HttpContext context)
{
StreamReader reader = new StreamReader(context.Request.InputStream);
//得到json字符串:strJson={"key":"xdp-gacl","key":"白虎神皇"}
String strJson = HttpUtility.UrlDecode(reader.ReadToEnd());
JavaScriptSerializer jss = new JavaScriptSerializer();
//将json字符串反序列化成一个Dictionary对象
Dictionary<String, Object> dicParameter = jss.Deserialize<Dictionary<String, Object>>(strJson);
return dicParameter;
}

GetParameter方法返回一个dicParameter对象,dicParameter就存放了从$.ajax方法中提交到ashx中的参数,如下图所示:

ashx文件获取$.ajax()方法发送的数据

这样就可以从dicParameter中取出传递过来的参数作处理了,完整代码如下:

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string operFlag = context.Request["operFlag"];
if (operFlag == "test")
{
string key = context.Request["key"];
string key = context.Request["key"];
string resStr = key + "|" + key;
context.Response.Write(resStr);
}
else if (operFlag == "test")
{
Dictionary<String, Object> dicParameter = GetParameter(context);
string key = dicParameter["key"].ToString();
string key = dicParameter["key"].ToString();
string resStr = "{\"key\":\"" + key + "\", \"key\":\"" + key + "\"}";
context.Response.Write(resStr);
}
}

以上所述是小编给大家介绍的ashx文件获取$.ajax()方法发送的数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jquery常用的12个小功能
Jul 22 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
javascript中Number的方法小结
Nov 21 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
微信小程序实现授权登录
May 15 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 #Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 #Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 #Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 #Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 #Javascript
JavaScript的String字符串对象常用操作总结
May 26 #Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 #Javascript
You might like
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php日历制作代码分享
2014/01/20 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
django反向解析和正向解析的方式
2018/06/05 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
UNIX文件名称有什么规定
2013/03/25 面试题
日语专业毕业生求职信
2013/12/04 职场文书
商业融资计划书
2014/04/29 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2014年督导工作总结
2014/11/19 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL