JQuery AJAX提交中文乱码的解决方案

 更新时间:2010年07月02日 23:45:36   作者:  
JQuery是一个非常优秀的框架,在特定场合下使用JQuery提交数据,相当的方便快捷。 但是,在处理一个GB2312编码的网站AJAX提交时,中文数据却成了乱码。

现象如下:

1)在Firefox下,处理页面的编码为gb2312,提交数据没有问题,中文能够正确解析;

2)在IE8下,处理页面的编码为gb2312,提交中文数据出现乱码。

无论是$.post还是$.ajax,抑或$.ajaxSubmit(来自于Form插件),在之前的UTF-8编码的网站都没有出现过任何问题, 看来是由于提交数据的网页的编码格式造成的了。不管怎么样,既然是浏览器之间存在差异,还是从HTTP包来看有什么问题吧。

打开Fiddle,分别用Firefox和IE做一个AJAX提交(以用户登录为例),检查他们的HTTP头,发现

1)两个浏览器提交的Form数据是一致的,都是进行了UTF-8的编码,如下图所示。


分析:JQuery的AJAX提交,会将要提交的数据进行编码,使用encodeURIComponent在js中处理数据。因此,无论是 Firefox或者IE,提交的数据都是一致的,都是UTF-8编码后的数据。

2)查看Header,发现Entity中的Content-Type存在差异

在Firefox中,Content-Type指定了字符集为utf-8。


而在IE8中,却没有任何的字符集指定。


分析:显然,默认情况下,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!!!

相关文章

  • jQuery实现联动下拉列表查询框

    jQuery实现联动下拉列表查询框

    这篇文章主要为大家详细介绍了jQuery实现联动下拉列表查询框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jquery tools 系列 scrollable学习

    jquery tools 系列 scrollable学习

    今天继续jquery tools六大功能之第三功能 scrollable的学习。一如既往,首先给出操作的html代码 此html代码修改自jquery tools官方网站demo代码
    2009-09-09
  • jQuery中next方法用法实例

    jQuery中next方法用法实例

    这篇文章主要介绍了jQuery中next方法用法,实例分析了jQuery中next方法的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-04-04
  • jQuery Ajax Post 回调函数不执行问题的解决方法

    jQuery Ajax Post 回调函数不执行问题的解决方法

    本文是小编给大家带来的jQuery Ajax Post 回调函数不执行的原因及解决方法,在本文最下面还给大家附加jquery Ajax 不执行回调函数success的原因,这两个问题都非常多见,感兴趣的朋友一起看下吧
    2016-08-08
  • json定义及jquery操作json的方法

    json定义及jquery操作json的方法

    下面小编就为大家带来一篇json定义及jquery操作json的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jQuery中(function($){})(jQuery)详解

    jQuery中(function($){})(jQuery)详解

    本文通过具体示例向大家详细介绍了jQuery中的(function($){})(jQuery)的用法和意义,对此有相同困惑的小伙伴可以参考下本文。
    2015-07-07
  • jQuery 3 中的新增功能汇总介绍

    jQuery 3 中的新增功能汇总介绍

    本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了,这个版本是可能对你现有的项目产生太大的影响,因为没有引入太多许多重大更改。
    2016-06-06
  • jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    这篇文章主要介绍了jQuery移动页面开发中的触摸事件与虚拟鼠标事件的简单编写方法,jQuery是当今人气最高的Javascript库并被广泛应用于移动web的开发,需要的朋友可以参考下
    2015-12-12
  • 基于jquery实现五子棋游戏

    基于jquery实现五子棋游戏

    这篇文章主要为大家详细介绍了基于jquery实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • jquery EasyUI的formatter格式化函数代码

    jquery EasyUI的formatter格式化函数代码

    以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。
    2011-01-01

最新评论