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 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
Vue实现剪贴板复制功能
Dec 31 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
德生S2000电路分析
2021/03/02 无线电
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
原生JS轮播图插件
2017/02/09 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
点球小游戏python脚本
2018/05/22 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
利用python实现逐步回归
2020/02/24 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
人事经理岗位职责范本
2014/08/04 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
利用Python实现模拟登录知乎
2022/05/25 Python
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers