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 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 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.MVC的模板标签系统(三)
2006/09/05 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python创建文件时去掉非法字符的方法
2018/10/31 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python实现随机漫步方法和原理
2019/06/10 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
优秀班主任申报材料
2014/12/16 职场文书
优秀党员推荐材料
2014/12/18 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
win10更新失败无限重启解决方法
2022/04/19 数码科技
python基础之//、/与%的区别详解
2022/06/10 Python