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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JavaScript体验异步更好的解决办法
Jan 08 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
短波收音机简介
2021/03/01 无线电
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
办公室主任职责范文
2013/11/08 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
社区工作者先进事迹
2014/01/18 职场文书
优秀交警事迹材料
2014/01/26 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
销售员试用期自我评价
2014/09/15 职场文书
干部作风建设工作总结
2014/10/29 职场文书
质量保证书格式模板
2015/02/27 职场文书
学校教师培训工作总结
2015/10/14 职场文书