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 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
javascript之bind使用介绍
Oct 09 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
Python中文编码那些事
2014/06/25 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
超级实用的8个Python列表技巧
2020/08/24 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
会计工作心得体会
2014/01/13 职场文书
七年级音乐教学反思
2014/01/26 职场文书
暑期教师培训方案
2014/06/07 职场文书
企业趣味活动方案
2014/08/21 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
大学运动会通讯稿
2015/07/18 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
JS class语法糖的深入剖析
2022/07/07 Javascript