日期:2014-05-16  浏览次数:20654 次

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

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


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

$.ajax({
	type: 'POST',
	url: '/admin/updatedisplayname}',
	data: {displayName:displayName},
	success: function(res){
		alert(1);
	},
	error: function() {
		alert(2);
	},
	dataType: 'json'
})

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

奇怪~

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

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

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

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

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

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

$.ajax({
	type: 'POST',
	url: '/admin/updatedisplayname}',
	data: {displayName:displayName},
	contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
	success: function(res){
		alert(1);
	},
	error: function() {
		alert(2);
	},
	dataType: 'json'
})


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

莫不是有啥玄机,查看jquery手册

contentTypeString

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


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

看看jquery源码:

ajaxSettings: {
		url: location.href,
		global: true,
		type: "GET",
		contentType: "application/x-www-form-urlencoded",
		processData: true,
		async: true,
		/*
		timeout: 0,
		data: null,
		username: null,
		password: null,
		traditional: false,
		*/
		// Create the request object; Microsoft failed to properly
		// implement the XMLHttpRequest in IE7 (can't request local files),
		// so we use the ActiveXObject when it is available
		// This function can be overriden by calling jQuery.ajaxSetup
		xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
			function() {
				return new window.XMLHttpRequest();
			} :
			function() {
				try {
					return new window.ActiveXObject("Microsoft.XMLHTTP");
				} catch(e) {}
			},
		accepts: {
			xml: "application/xml, text/xml",
			html: "text/html",
			script: "text/javascript, application/javascript",
			json: "application/json, text/javascript",
			text: "text/plain",
			_default: "*/*"
		}
	},


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

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

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


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


再查~


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


ajaxSettings: {
		url: ajaxLocation,
		isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
		global: true,
		type: "GET",
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		processData: true,
		async: true,
		/*
		timeout: 0,
		data: null,
		dataType: null,
		username: null,
		password: null,
		cache: null,
		traditional: false,
		headers: {},
		*/

		accepts: {
			xml: "application/xml, text/xml",
			html: "text/ht