jquery的ajax()函数传值中文乱码解决方法介绍


Posted in Javascript onNovember 08, 2012
$.ajax({ 
  dataType : ‘json',type : ‘POST',url : ‘http://localhost/test/test.do',data : {id: 1, type: ‘商品'},success : function(data){ } } );

问题:
提交后后台action程序时,取到的type是乱码
解决方法:
方法一:提交前采用encodeURI两次编码,记住一定是两次
1.修改以下代码
data:{id:1, type:encodeURI(encodeURI(‘商品'))}

2.在后台action里要对取得的字符串进行decode
1、String type = request.getParameter(“type”);
2、type = URLDecoder.decode(type, “UTF-8″);
方法二:ajax配置contentType属性,加上charset=UTF-8
在ajax方法中加入以下参数
contentType: “application/x-www-form-urlencoded; charset=UTF-8″使用其它js框架或者xhr都是差不多,设置header中contentType即可,
这里关键是charset=UTF-8,如果没有这个,是不行的,默认jQuery里的contentType是没有的

一、测试环境
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 相关文章推荐
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
再谈JavaScript线程
Jul 10 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
iScroll.js 使用方法参考
May 16 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
表头固定(利用jquery实现原理介绍)
Nov 08 #Javascript
Javascript继承(上)——对象构建介绍
Nov 08 #Javascript
异步javascript的原理和实现技巧介绍
Nov 08 #Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 #Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 #Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 #Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 #Javascript
You might like
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
关于php中一些字符串总结
2016/05/05 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
django站点管理详解
2017/12/12 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python 导入数据及作图的实现
2019/12/03 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
前厅收银主管岗位职责
2014/02/04 职场文书
服装设计专业求职信
2014/06/16 职场文书
安全环保演讲稿
2014/08/28 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Go语言空白表示符_的实例用法
2021/07/04 Golang
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Python何绘制带有背景色块的折线图
2022/04/23 Python