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 面向对象的5钟写法
Jul 31 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
canvas知识总结
Jan 25 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
JavaScript定时器使用方法详解
Mar 26 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可变函数的使用详解
2013/06/14 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
原生js实现轮播图
2017/02/27 Javascript
vue生命周期实例小结
2018/08/15 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Numpy数组的保存与读取方法
2018/04/04 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
仓库规划计划书
2014/04/28 职场文书
理发店策划方案
2014/06/05 职场文书
运动会入场口号
2014/06/07 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2016春季运动会前导词
2015/11/25 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
分享提高 Python 代码的可读性的技巧
2022/03/03 Python