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 通用简单的table选项卡实现
May 07 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue路由跳转传参数的方法
May 06 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
前端监听websocket消息并实时弹出(实例代码)
Nov 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
我的论坛源代码(九)
2006/10/09 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
Python中__name__的使用实例
2015/04/14 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
软件测试企业面试试卷
2016/07/13 面试题
毕业生的自我评价
2013/12/30 职场文书
企业后勤岗位职责
2014/02/28 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript