0%

AJAX不会自动重定向

浏览器不会自动重定向

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

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

看以下代码:

1
2
3
4
5
6
7
8
9
10
$.ajax({
url : '/test.php',
dataType : 'json',
complete : function(){
console.log('请求完毕');
},
success : function(result){
console.log('收到预期的json数据');
}
});

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

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


在complete里写代码重定向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.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数据');
}
});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$.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
});