JQuery 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！！！

赞 (0)

相关推荐

  • jquery ajax例子返回值详解

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 首先我们看$.get(): 复制代码 代码如下: $.get("test.jsp", { name: "cssrain", time: "2008/01/21" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } ) 然后看$.post(): 跟$.get()格式一样.

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 复制代码 代码如下: $.get("dat

  • jquery中ajax使用error调试错误的方法

    本文实例讲述了jquery中ajax使用error调试错误的方法.分享给大家供大家参考.具体分析如下: JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery中ajax的常用用法类似于: $(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.a

  • jQuery使用ajax_动力节点Java学院整理

    用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦. 用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化. ajax jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求.ajax(url, settings)函数需要接收一个URL和一个可选的settings对象,常用的选项如下: async:是否异步执行AJAX请求,默认为true,千万不要指定为fals

  • jquery ajax 向后台传递数组参数示例

    需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO

  • JQuery的Ajax请求实现局部刷新的简单实例

    JQuery的Ajax请求实现局部刷新的简单实例

    请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

  • jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

随机推荐