jquery中文乱码的多种解决方法


Posted in Javascript onJune 21, 2013

1、使用$.ajax出现的中文乱码的解决方案:

var _realname = $("input[name='_searchName']").val(); 
    var termcourseId = '<%=termid%>'; 
    var classId = '<%=classid%>'; 
    var url = "/addressbook/studentListNoPage.do"; 
    //var dataUrl = "formMap.TERMCOURSE_ID="+termcourseId+"&formMap.CLASS_ID="+classId+"&formMap.IS_ONLINE=all&formMap.REALNAME="+_realname; 
    $.ajax({ 
           type: "POST", 
           url: url, 
           dataType:"json", 
           data: { 
               "formMap.TERMCOURSE_ID":termcourseId, 
               "formMap.CLASS_ID":classId, 
               "formMap.IS_ONLINE":"all", 
               "formMap.REALNAME":encodeURI(_realname) 
           }, 
           contentType: "application/x-www-form-urlencoded; charset=utf-8", 
           success: function(data){ 
               data = eval(data); 
               var html = ""; 
               $("#allUnselectedUser").html(html); 
           }, 
           error : function(XMLHttpRequest, textStatus, errorThrown){ 
               alert(textStatus); 
           } 
        });

其中当使用dataUrl中的&方式提交时,无论前台是使用encodeURI或者encodeURIComponent又或者escape把中文转码,提交到Action中都是乱码,并不是想要的%e6%b1%89%e5%ad%97这种转后编码。即使加上contentType也不行。

把dataUrl中的&方式提交修改为data:{name:value}的方式提交即可。

在Action中使用URLDecoder.decode(realname, "UTF-8")来转码即可转换为中文了。使用UTF-8是因为Jquery的提交方式默认为UTF-8,即使把contentType中的charset修改其他,例如GBK,后台也把UTF-8修改GBK,都不能正确转换。

jQuery ajax乱码问题解决
一、测试环境
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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
jQuery简单实现日历的方法
May 04 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
vue时间格式化实例代码
Jun 13 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
js单向链表的具体实现实例
Jun 21 #Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 #Javascript
js简易namespace管理器 实例代码
Jun 21 #Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 #Javascript
js验证模型自我实现的具体方法
Jun 21 #Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 #Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 #Javascript
You might like
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
留学自荐信
2013/10/10 职场文书
应聘教师自荐信
2013/10/12 职场文书
艺术教育实施方案
2014/05/03 职场文书
医学求职信
2014/05/28 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
出售房屋协议书范本
2014/10/06 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
团组织推荐意见
2015/06/05 职场文书
大学校园招聘会感想
2015/08/10 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python