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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
js Function类型
Dec 04 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
华润集团网上药店:健一网
2016/09/19 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
工程师岗位职责
2013/11/08 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
《称象》教学反思
2014/04/25 职场文书
国庆节标语大全
2014/10/08 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
中秋节祝酒词
2015/08/12 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
JavaScript流程控制(循环)
2021/12/06 Javascript
mysql sock文件存储了什么信息
2022/07/15 MySQL