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 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
原生js+canvas实现验证码
Nov 29 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
服务器web工具 php环境下
2010/12/29 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
jQuery实现的form转json经典示例
2017/10/10 jQuery
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
python中实现k-means聚类算法详解
2017/11/11 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python简易远程控制单线程版
2018/06/20 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
单位在职证明范本
2014/01/09 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
音乐课外活动总结
2015/05/09 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android