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倒计时功能实现代码
Jun 07 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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
解析htaccess伪静态的规则
2013/06/18 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
Python科学画图代码分享
2017/11/29 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python打印异常信息的两种实现方式
2019/12/24 Python
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
幼儿园大班区域活动总结
2014/07/09 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2014年人大工作总结
2014/12/10 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
社会实践活动报告
2015/02/05 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
队列队形口号
2015/12/25 职场文书
校园安全教育心得体会
2016/01/15 职场文书