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 相关文章推荐
修改file按钮的默认样式实现代码
Apr 23 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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
PHP5中MVC结构学习
2006/10/09 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php随机抽奖实例分析
2015/03/04 PHP
利用php输出不同的心形图案
2016/04/22 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
javascript模块化简单解析
2016/04/07 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python中除法使用的注意事项
2014/08/21 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
大课间体育活动方案
2014/03/12 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
新闻编辑求职信
2014/07/13 职场文书
水电维修专业推荐信
2014/09/06 职场文书
参观邀请函范文
2015/02/02 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang