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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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&java(二)
2006/10/09 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
Python的类实例属性访问规则探讨
2015/01/30 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
python图书管理系统
2020/04/05 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
探矿工程师自荐信
2014/01/24 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
办理房产过户的委托书
2014/09/14 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
孔繁森观后感
2015/06/10 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
golang slice元素去重操作
2021/04/30 Golang
Python实现socket库网络通信套接字
2021/06/04 Python