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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
React如何创建组件
Jun 27 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
openPNE常用方法分享
2011/11/29 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
js实现图片实时时钟
2020/01/15 Javascript
python的id()函数介绍
2013/02/10 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python性能优化的20条建议
2014/10/25 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
对python3新增的byte类型详解
2018/12/04 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
职业女性的职业规划
2014/03/04 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Python破解极验滑动验证码详细步骤
2021/05/21 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
python字符串的多行输出的实例详解
2021/06/08 Python
Python必备技巧之函数的使用详解
2022/04/04 Python