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实现控制内容的向上向下滚动效果
Jun 26 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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中的插件机制原理和实例
2014/07/08 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python 正则表达式(转义问题)
2014/12/15 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python 图像平移和旋转的实例
2019/01/10 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
UNIX特点都有哪些
2016/04/05 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
表演方阵解说词
2014/02/08 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
学习雷锋倡议书
2014/04/15 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技