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 miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
typescript配置alias的详细步骤
Aug 12 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 cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Jquery 扩展方法
2010/05/06 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
用Python实现命令行闹钟脚本实例
2016/09/05 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python基于socket函数实现端口扫描
2020/05/28 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
大学生社团活动总结
2014/04/26 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
与美同行演讲稿
2014/09/13 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技