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移除元素自动解绑事件实现思路及代码
May 31 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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统计数组元素个数的方法
2015/07/02 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python魔术方法详解
2015/02/14 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
Python实现栈的方法
2015/05/26 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Django如何配置mysql数据库
2018/05/04 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
住宅质量保证书
2014/04/29 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
辩论赛新闻稿
2015/07/17 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL