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 相关文章推荐
js 火狐下取本地路径实现思路
Apr 02 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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 和 MySQL 时区的一点总结
2008/03/26 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP curl使用实例
2015/07/02 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
python跨文件使用全局变量的实现
2020/11/17 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
写给学生的新学期寄语
2014/01/18 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
员工入职担保书范文
2014/04/01 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
支行行长竞聘报告
2014/11/06 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书