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 参数中的数组展开 [译]
Sep 21 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
npm qs模块使用详解
Feb 07 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 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常用代码大全(新手入门必备)
2010/06/29 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
CI框架中zip类应用示例
2014/06/17 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP echo()函数讲解
2019/02/15 PHP
接收键盘指令的脚本
2006/06/26 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
js图片预加载示例
2014/04/30 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
优秀护士获奖感言
2014/02/20 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
实习护士自荐信
2015/03/25 职场文书
学生检讨书怎么写
2015/05/07 职场文书
少年犯观后感
2015/06/11 职场文书
七一表彰大会简报
2015/07/20 职场文书