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 扩展对input的一些操作方法
Oct 30 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
学习Node.js模块机制
Oct 17 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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设计模式中的工厂模式
2008/06/12 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
javascript中Function类型详解
2015/04/28 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python中的集合介绍
2019/01/28 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Python实现手势识别
2020/10/21 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
采购助理岗位职责
2014/02/16 职场文书
简单的项目建议书模板
2014/03/12 职场文书
2014组织生活会方案
2014/05/19 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
八年级作文之友情
2019/11/25 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android