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 相关文章推荐
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
实例讲解vue源码架构
Jan 24 Javascript
详解微信UnionID作用
May 15 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python缓存技术实现过程详解
2019/09/25 Python
如何在pycharm中安装第三方包
2020/10/27 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
护理专业应届毕业生推荐信
2013/11/15 职场文书
校长新学期寄语2016
2015/12/04 职场文书