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代码复用模式实例分析
Dec 02 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
localStorage实现便签小程序
Nov 28 Javascript
js 颜色选择插件
Jan 23 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
用Socket发送电子邮件
2006/10/09 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
document.getElementById介绍
2011/09/13 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python实现中文转换url编码的方法
2016/06/14 Python
python去掉行尾的换行符方法
2017/01/04 Python
python中import学习备忘笔记
2017/01/24 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python2.7的flask框架之引用js&css等静态文件的实现方法
2019/08/22 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
贯彻学习两会心得体会范文
2014/03/17 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2014小学年度工作总结
2014/12/20 职场文书
升职自我推荐信范文
2015/03/25 职场文书