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 相关文章推荐
使用正则替换变量
May 05 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
巧用canvas
Jan 21 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 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准确取得服务器IP地址的方法
2015/06/02 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
求职者简历中的自我评价
2013/10/20 职场文书
生物科学专业自荐书
2014/06/20 职场文书
医德医魂心得体会
2014/09/11 职场文书
白鹤梁导游词
2015/02/06 职场文书
消费者投诉书范文
2015/07/02 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python