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在一段文字中的光标处插入其他文字
Aug 26 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
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用正则表达式匹配中文实例详解
2013/11/06 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python实现外卖信息管理系统
2018/01/11 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
酒店管理自荐信
2013/10/23 职场文书
一年级语文教学反思
2014/02/13 职场文书
绩效工资实施方案
2014/03/15 职场文书
单位绩效考核方案
2014/05/11 职场文书
合同意向书范本
2014/07/30 职场文书
人民的好儿女观后感
2015/06/18 职场文书
七年级数学教学反思
2016/02/17 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Python读写yaml文件
2022/03/20 Python