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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js精度溢出解决方案
2012/12/02 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python批量赋值操作实例
2018/10/22 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
static关键字的用法
2013/10/07 面试题
学习雷锋活动总结
2014/04/29 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫