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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
javascript 定义新对象方法
Feb 20 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
angular.js实现列表orderby排序的方法
Oct 02 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简单获取复选框值的方法
2016/05/11 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php实现小程序支付完整版
2018/10/09 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python之super的使用小结
2018/08/13 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python面向对象进阶学习
2019/05/21 Python
python的等深分箱实例
2019/11/22 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Python 日期与时间转换的方法
2020/08/01 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
甜品店创业计划书
2014/09/21 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
2019财务转正述职报告
2019/06/27 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
七年级作文之游记
2019/12/11 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers