$.ajax在谷歌浏览器传入中文乱码的情况

有运营同学反映，后台编辑的一个中文显示名称，前台乱码了，于是乎~~

先看代码是否get请求没转码：

[javascript]  view plain  copy

1. $.ajax({  
2.     type: 'POST',  
3.     url: '/admin/updatedisplayname}',  
4.     data: {displayName:displayName},  
5.     success: function(res){  
6.         alert(1);  
7.     },  
8.     error: function() {  
9.         alert(2);  
10.     },  
11.     dataType: 'json'  
12. })  

这段代码不管怎么看，也没有问题，post请求过去的，应该不会存在乱码问题，自己测了下，修改回去了，没乱码（火狐）

奇怪~

问了下，对方用的是谷歌，检查他的浏览器编码有没特殊设置过，没有，一切正常。

纳闷，回来在谷歌测试下，晕死，果然重现，乱码了，哈哈，那就好办，查~

看看请求头信息啥的，发现使用$.ajax请求的时候有一个值有问题

chrome：contentType: 'application/x-www-form-urlencoded'

ff：contentType: 'application/x-www-form-urlencoded; charset=UTF-8',

难道是这个在作祟，如果乎~

[javascript]  view plain  copy

1. $.ajax({  
2.     type: 'POST',  
3.     url: '/admin/updatedisplayname}',  
4.     data: {displayName:displayName},  
5.     contentType: 'application/x-www-form-urlencoded; charset=UTF-8',  
6.     success: function(res){  
7.         alert(1);  
8.     },  
9.     error: function() {  
10.         alert(2);  
11.     },  
12.     dataType: 'json'  
13. })  

加上参数测试，果然在谷歌下不乱码了，问题解决。

莫不是有啥玄机，查看jQuery手册

contentTypeString

(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）

为毛我在不传入这个值的时候，火狐会加上 charset=UTF-8呢？

看看jquery源码：

[javascript]  view plain  copy

1. ajaxSettings: {  
2.         url: location.href,  
3.         global: true,  
4.         type: "GET",  
5.         contentType: "application/x-www-form-urlencoded",  
6.         processData: true,  
7.         async: true,  
8.         /* 
9.         timeout: 0, 
10.         data: null, 
11.         username: null, 
12.         password: null, 
13.         traditional: false, 
14.         */  
15.         // Create the request object; Microsoft failed to properly  
16.         // implement the XMLHttpRequest in IE7 (can't request local files),  
17.         // so we use the ActiveXObject when it is available  
18.         // This function can be overriden by calling jQuery.ajaxSetup  
19.         xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?  
20.             function() {  
21.                 return new window.XMLHttpRequest();  
22.             } :  
23.             function() {  
24.                 try {  
25.                     return new window.ActiveXObject("Microsoft.XMLHTTP");  
26.                 } catch(e) {}  
27.             },  
28.         accepts: {  
29.             xml: "application/xml, text/xml",  
30.             html: "text/html",  
31.             script: "text/javascript, application/javascript",  
32.             json: "application/json, text/javascript",  
33.             text: "text/plain",  
34.             _default: "*/*"  
35.         }  
36.     },  

貌似问题已经找到，通知团队成员，仔细检查所有项目的$.ajax方法的使用，是否有传递中文参数，如果有就加上：

[javascript]  view plain  copy

1. contentType: 'application/x-www-form-urlencoded; charset=UTF-8',  

果然发现了几个隐藏的bug，不过像这样的直接使用$.ajax一般只有后台系统才用用到，而我们的后台系统是可以不兼容google的，所以当时测试的时候可能没测到。

不过，又有问题，有同学没有加，但是测试是ok的，谷歌不乱码，各种不淡定啊。。。。

再查~

首先想到检查jquery版本，果然，这哥们是用jquery1.7.2，而我用的是1.4.2，查看1.7.2的源码：

[javascript]  view plain  copy

1. ajaxSettings: {  
2.         url: ajaxLocation,  
3.         isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),  
4.         global: true,  
5.         type: "GET",  
6.         contentType: "application/x-www-form-urlencoded; charset=UTF-8",  
7.         processData: true,  
8.         async: true,  
9.         /* 
10.         timeout: 0, 
11.         data: null, 
12.         dataType: null, 
13.         username: null, 
14.         password: null, 
15.         cache: null, 
16.         traditional: false, 
17.         headers: {}, 
18.         */  
19.   
20.         accepts: {  
21.             xml: "application/xml, text/xml",  
22.             html: "text/html",  
23.             text: "text/plain",  
24.             json: "application/json, text/javascript",  
25.             "*": allTypes  
26.         },  
27.   
28.         contents: {  
29.             xml: /xml/,  
30.             html: /html/,  
31.             json: /json/  
32.         },  
33.   
34.         responseFields: {  
35.             xml: "responseXML",  
36.             text: "responseText"  
37.         },  
38.   
39.         // List of data converters  
40.         // 1) key format is "source_type destination_type" (a single space in-between)  
41.         // 2) the catchall symbol "*" can be used for source_type  
42.         converters: {  
43.   
44.             // Convert anything to text  
45.             "* text": window.String,  
46.   
47.             // Text to html (true = no transformation)  
48.             "text html": true,  
49.   
50.             // Evaluate text as a json expression  
51.             "text json": jQuery.parseJSON,  
52.   
53.             // Parse text as xml  
54.             "text xml": jQuery.parseXML  
55.         },  
56.   
57.         // For options that shouldn't be deep extended:  
58.         // you can add your own custom options here if  
59.         // and when you create one that shouldn't be  
60.         // deep extended (see ajaxExtend)  
61.         flatOptions: {  
62.             context: true,  
63.             url: true  
64.         }  
65.     },  

晕死，在1.7.2中居然加上了charset=UTF-8，

各种~~~~，再探~1.7源码里面也是没有的

好吧，1.7.2里面没有这个问题。

结论：

1、使用1.7.2之前的版本，在使用$.ajax的时候需要自行设置contentType否则，谷歌会乱码。

2、跟浏览器也有关系，火狐就可以自动加上utf-8而谷歌则不会，也行jquery团队发现这个问题，所以就在最新版更正了这个问题。

测试及生成环境：

1、Java环境，打包gbk，页面编码gbk，tomcat中URIEncoding配置utf-8等，也许应该跟这些服务器配置也是有关系的，就不深究下去了。

猜测：一般post表单请求的请求数据编码是按照页面里面的meta指定的编码格式编码的，我们页面是gbk的，所以在谷歌浏览器在未指定ajax的contentType参数的时候采用默认页面编码方式gbk编码然后发送到服务器端，而我们tomcat里面的URIEncoding是utf-8的，所以就两边编码不一样，就乱码了，显式的指定一下就ok。不过貌似ajax统一都是utf-8的来编码的，就算不指定也不会有问题，莫不是谷歌。。。。