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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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调用Java对象的方法
2006/10/09 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
Node.js编码规范
2014/07/14 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
详解Angular 4.x Injector
2017/05/04 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
angularjs模态框的使用代码实例
2019/12/20 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Python中的yield浅析
2014/06/16 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python实现井字棋游戏
2020/03/30 Python
python 写的一个爬虫程序源码
2016/02/28 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
C++的几个面试题附答案
2016/08/03 面试题
培训主管的岗位职责
2013/11/23 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
党员创先争优心得体会
2014/09/11 职场文书
安全生产先进个人总结
2015/02/15 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL