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弹出层类代码分享
Dec 27 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 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 pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
python3.5的包存放的具体路径
2020/08/16 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
什么是GWT的Module
2013/01/20 面试题
财会自我鉴定范文
2013/12/27 职场文书
电子商务自荐书范文
2014/01/04 职场文书
新学期班主任寄语
2014/01/18 职场文书
股份转让协议书
2014/04/12 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
茶花女读书笔记
2015/06/29 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Python中tqdm的使用和例子
2022/09/23 Python