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和jQuery的片段分享
Aug 23 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
基于redis的小程序登录实现方法流程分析
May 25 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中的unset究竟会不会释放内存
2013/07/18 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
javascript date格式化示例
2013/09/25 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Flask框架配置与调试操作示例
2018/07/23 Python
Python中new方法的详解
2019/01/15 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
高中体育教学反思
2014/01/29 职场文书
个人对照检查材料
2014/02/12 职场文书
安踏广告词改编版
2014/03/21 职场文书
安全例会汇报材料
2014/08/23 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
爱国主义电影观后感
2015/06/18 职场文书
初二英语教学反思
2016/02/15 职场文书
实习报告范文
2019/07/30 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis