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读取中文COOKIE的解决办法
Feb 15 Javascript
js 异步处理进度条
Apr 01 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
js判断两个数组相等的5种方法
May 06 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php变量范围介绍
2012/10/15 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python实现超级玛丽游戏
2020/03/18 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
班组长竞聘书
2014/03/31 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
推普标语口号大全
2015/12/26 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技