新手误区 - ajax不会自动重定向 ¶

• 作者：KK

• 发表日期：2017.3.6

浏览器不会自动重定向 ¶

在ajax请求方式的情况下，如果服务端返回301或302这些重定向状态码，并告知了要重定向的网址，浏览器是不会自动重定向的，需要手写重定向处理代码

以jQuery的ajax为例，运行规则就是如果服务端返回的数据类型不是预期的类型，就不会触发success回调，但只要服务端有响应，都会触发complete

看以下代码：

$.ajax({
	url : '/test.php',
	dataType : 'json',
	complete : function(){
		console.log('请求完毕');
	},
	success : function(result){
		console.log('收到预期的json数据');
	}
});

如果服务端不返回json格式，则只会触发complete和error，但不会触发success

这其中也包括了服务端返回重定向状态码，重定向的情况下，响应报文是不含内容主体的，所以也就是没有数据，只有报头，于是也是得不到预期的json数据

在complete里写代码重定向 ¶

$.ajax({
	url : '/test.php',
	dataType : 'json',
	complete : function(xhr){
		if((xhr.status >= 300 && xhr.status < 400) && xhr.status != 304){
			//重定向网址在响应头中，取出再执行跳转
			var redirectUrl = xhr.getResponseHeader('X-Redirect');
			location.href = redirectUrl;
		}
	},
	success : function(result){
		console.log('收到预期的json数据');
	}
});

页面初始化的时候就设定重定向逻辑 ¶

$.ajaxSetup({
	dataType : 'json',
	complete : function(xhr){
		if((xhr.status >= 300 && xhr.status < 400) && xhr.status != 304){
			var redirectUrl = xhr.getResponseHeader('X-Redirect');
			location.href = redirectUrl;
		}
	}
});

//以下三种请求方式一旦收到重定向响应代码就会调用上面安装好的complete回调，不会执行callback
$.get(会重定向的地址, callback);

$.post(会重定向的地址, callback);

$.ajax({
	url : 会重定向的地址,
	success : callback
});