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实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
详解JS ES6编码规范
May 07 Javascript
JavaScript执行机制详细介绍
Dec 06 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框架Phpbean说明
2008/01/10 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python迭代用法实例教程
2014/09/08 Python
python妙用之编码的转换详解
2017/04/21 Python
基于Python的关键字监控及告警
2017/07/06 Python
Django中Model的使用方法教程
2018/03/07 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Django使用rest_framework写出API
2020/05/21 Python
如何通过python计算圆周率PI
2020/11/11 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
活动志愿者自荐信
2014/01/27 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
职业女性的职业规划
2014/03/04 职场文书
汽车广告策划方案
2014/05/31 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL