jquery的ajax()函数传值中文乱码解决方法介绍


Posted in Javascript onNovember 08, 2012
$.ajax({ 
  dataType : ‘json',type : ‘POST',url : ‘http://localhost/test/test.do',data : {id: 1, type: ‘商品'},success : function(data){ } } );

问题:
提交后后台action程序时,取到的type是乱码
解决方法:
方法一:提交前采用encodeURI两次编码,记住一定是两次
1.修改以下代码
data:{id:1, type:encodeURI(encodeURI(‘商品'))}

2.在后台action里要对取得的字符串进行decode
1、String type = request.getParameter(“type”);
2、type = URLDecoder.decode(type, “UTF-8″);
方法二:ajax配置contentType属性,加上charset=UTF-8
在ajax方法中加入以下参数
contentType: “application/x-www-form-urlencoded; charset=UTF-8″使用其它js框架或者xhr都是差不多,设置header中contentType即可,
这里关键是charset=UTF-8,如果没有这个,是不行的,默认jQuery里的contentType是没有的

一、测试环境
jQuery:1.3.2
tomcat:5.5.17
二、测试方法
1.使用get方式
服务器端java代码:

String name = new String(request.getParameter("name").getBytes("iso8859-1"),"utf-8");

客户端js代码:
$.ajax({url: "2.jsp",type: "get",data: {name:"中文"},success: function(response){ 
alert(response); 
}});

结果:正确显示
$.ajax({url: "2.jsp",type: "get",data: "name=中文",success: function(response){ 
alert(response); 
}});

结果:乱码
$.get("2.jsp", { name: "中文" },function(response){ 
alert(response); 
});

结果:正确显示
$.get("2.jsp", "name=中文",function(response){ 
alert(response); 
});

结果:乱码

2.post方式
服务器端java代码:

request.setCharacterEncoding("UTF-8"); 
String name = request.getParameter("name");

客户端js代码:
$.ajax({url: "3.jsp",type: "post",data: "method=testAjaxPost&name=中文",success: function(response){ 
alert(response); 
}});

结果:正确显示
$.ajax({url: "3.jsp",type: "post",data: {name:"中文"},success: function(response){ 
alert(response); 
}});

结果:正确显示
$.post("3.jsp", { name: "中文" },function(response){ 
alert(response); 
});

结果:正确显示
$.post("3.jsp", "name=中文",function(response){ 
alert(response); 
});

结果:正确显示
三、使用filter
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 
HttpServletRequest req = (HttpServletRequest) request; 
if (req.getHeader("X-Requested-With") != null && req.getHeader("X-Requested-With").equalsIgnoreCase("XMLHttpRequest")) { 
request.setCharacterEncoding("utf-8"); 
} else { 
request.setCharacterEncoding("gbk"); 
} 
chain.doFilter(request, response); 
}

jQuery在使用ajax的时候会在header中加入X-Requested-With,值为:XMLHttpRequest,filter中判断是jQuery的ajax请求时就把字符编码设为utf8,这样可以解决post提交中的中文乱码问题,不需要在代码中设置request.setCharacterEncoding("UTF-8");
对于get方式的中文乱码问题,建议不使用get方式提交中文,统统改为post ^-^

为了和prototype.js处理中文的方式一致,可以使用如下的方式,自定义header中的属性RequestType

$.ajax({ 
url: "3.jsp", 
type: "post", 
data: {name:"中文"}, 
beforeSend: function(XMLHttpRequest){ 
XMLHttpRequest.setRequestHeader("RequestType", "ajax"); 
alert("开始"); 
}, 
success: function(data, textStatus){ 
alert(data); 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown){ 
alert("错误:" + textStatus); 
}, 
complete: function(XMLHttpRequest, textStatus){ 
alert("完成:" + textStatus); 
} 
});

filter代码如下:
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 
HttpServletRequest req = (HttpServletRequest) request; 
if (req.getHeader("RequestType") != null && req.getHeader("RequestType").equalsIgnoreCase("ajax"))) { 
request.setCharacterEncoding("utf-8"); 
} else { 
request.setCharacterEncoding("gbk"); 
} 
chain.doFilter(request, response); 
}
Javascript 相关文章推荐
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
mailto的使用技巧分享
Dec 21 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 #Javascript
Javascript继承(上)——对象构建介绍
Nov 08 #Javascript
异步javascript的原理和实现技巧介绍
Nov 08 #Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 #Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 #Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 #Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
农村婚礼证婚词
2014/01/10 职场文书
大学生自我鉴定书
2014/03/24 职场文书
2014年售票员工作总结
2014/11/19 职场文书
劳模事迹材料范文
2014/12/24 职场文书
边城读书笔记
2015/06/29 职场文书
高一军训感想
2015/08/07 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
python通过opencv调用摄像头操作实例分析
2021/06/07 Python