JQuery AJAX提交中文乱码的解决方案


Posted in Javascript onJuly 02, 2010

现象如下:

1)在Firefox下,处理页面的编码为gb2312,提交数据没有问题,中文能够正确解析;

2)在IE8下,处理页面的编码为gb2312,提交中文数据出现乱码。

无论是$.post还是$.ajax,抑或$.ajaxSubmit(来自于Form插件),在之前的UTF-8编码的网站都没有出现过任何问题, 看来是由于提交数据的网页的编码格式造成的了。不管怎么样,既然是浏览器之间存在差异,还是从HTTP包来看有什么问题吧。

打开Fiddle,分别用Firefox和IE做一个AJAX提交(以用户登录为例),检查他们的HTTP头,发现

1)两个浏览器提交的Form数据是一致的,都是进行了UTF-8的编码,如下图所示。

JQuery AJAX提交中文乱码的解决方案

分析:JQuery的AJAX提交,会将要提交的数据进行编码,使用encodeURIComponent在js中处理数据。因此,无论是 Firefox或者IE,提交的数据都是一致的,都是UTF-8编码后的数据。

2)查看Header,发现Entity中的Content-Type存在差异

在Firefox中,Content-Type指定了字符集为utf-8。

JQuery AJAX提交中文乱码的解决方案

而在IE8中,却没有任何的字符集指定。

JQuery AJAX提交中文乱码的解决方案

分析:显然,默认情况下,AJAX的异步提交的字符编码应该和网页本身保持一致,也就是说,Server端在没有发现显示的charset指定的情 况下,使用gb2312来解码数据(但是数据在提交前已经被UTF-8编码了),这就是为什么在IE下会出现乱码的根源,而在Firefox下,浏览器在 提交AJAX数据的时候,加上了charset的显示指定,导致Server端采用UTF-8来解码数据(正确解码)。

推断:看来要解决这个中文乱码问题,就必须给AJAX异步提交指定显 示的charset!

马上查阅JQuery的AJAX工具函数的说明,发现options中有一个指定content-type的参数,给我的AJAX代码加上:

jQuery(form).ajaxSubmit({ 
url: "ajax.aspx?a=memberlogin", 
type: "post", 
dataType: "json", 
contentType: "application/x-www-form-urlencoded; charset=utf-8", 
success: showLoginResponse 
});

测试,OK!!!
Javascript 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
浅谈js闭包理解
Mar 28 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
IE本地存储userdata的一个bug说明
Jul 01 #Javascript
UserData用法总结 lanyu出品
Jul 01 #Javascript
javascript 函数调用的对象和方法
Jul 01 #Javascript
this和执行上下文实现代码
Jul 01 #Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 #Javascript
jquery validate使用攻略 第四步
Jul 01 #Javascript
jquery.validate使用攻略 第三部
Jul 01 #Javascript
You might like
PHP获取url的函数代码
2011/08/02 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php删除指定目录的方法
2015/04/03 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python实现简单登录验证
2016/04/13 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python Xpath语法的使用
2020/11/26 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
归元寺导游词
2015/02/06 职场文书
校运会新闻稿
2015/07/17 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
windows系统安装配置nginx环境
2022/06/28 Servers