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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
Vue发布项目实例讲解
Jul 17 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
javascript下function声明一些小结
2007/12/28 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
Python OS模块常用函数说明
2015/05/23 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Mac 上切换Python多版本
2017/06/17 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
解决python运行效率不高的问题
2020/07/20 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
高考寄语大全
2014/04/08 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL