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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
Vue SSR 即时编译技术的实现
May 06 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
Node.js编码规范
2014/07/14 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python实现无证书加密解密实例
2014/10/27 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
作风转变心得体会
2014/09/02 职场文书
接收函格式
2015/01/30 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
宇宙与人观后感
2015/06/05 职场文书
小学科学课教学反思
2016/02/23 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL