正文
ajax回调中的this.href不执行跳转的解决办法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1. 问题背景
如下所示代码：
$.post("/ems/register",indata, function(data){
if(data != null && data.result == 'error'){
$("#no_error").text(data.msg);
return false;
}else{
this.href="/ems/registerSuccess";
}
},'json');
即使注册成功， data.result != 'error' ，代码 ： this.href="/ems/registerSuccess"; 也不会执行。测试了很久，最后才怀疑到ajax异步上来。
原因就是这里是异步调用，this.href 是处在异步调用的回调中。
但是即使是我们使用了ajax的同步调用，那么在回调函数中的：this.href="/ems/registerSuccess"; 也不会执行：
$.ajax({
url:"/ems/register",
async:false, // 注意此处需要同步，不然后面的 this.href=xxx 不执行
type:"POST",
dataType:"json",
data:indata,
success:function(data) {
if(data != null && data.result == 'error'){
alert(222);
$("#no_error").text(data.msg);
return false;
}else{
// 这里的this.href不会执行
this.href="/ems/registerSuccess";
}
}
});
即使我们 async:false 采用同步调用，在firefox浏览器中的，回调函数中的 this.href="/ems/registerSuccess"; 也不会执行。
2. 解决方法一
只有采用同步的同时，在 ajax 代码后面的 this.href="/ems/registerSuccess"; 才会执行。
$.ajax({
url:"/ems/register",
async:false, // 注意此处需要同步，不然后面的 this.href=xxx 不执行
type:"POST",
dataType:"json",
data:indata,
success:function(data) {
if(data != null && data.result == 'error'){
alert(222);
$("#no_error").text(data.msg);
return false;
}else{
// 这里的this.href不会执行
//this.href="/ems/registerSuccess";
}
}
});
this.href="/ems/registerSuccess";
最后面的 this.href="/ems/registerSuccess"; 在ajax 同步调用的后面，才会执行。
3. 解决方法二
既然我们不能使用 this.href, 那么我们可以换一种方式，我们使用 window.open(url,'_self')，经过测试，不存在this.href的问题。代码如下：
$.post("/ems/register",indata, function(data){
if(data != null && data.result == 'error'){
$("#no_error").text(data.msg);
return false;
}else{
//this.href="/ems/registerSuccess";
window.open("/ems/registerSuccess", '_self');
}
},'json');
这也算是 window.href 和 window.open(url,'_self')的一个小区别吧。
4. 解决方法三
我们在服务端 重定向，不在浏览器端重定向。就可以绕开这个问题。（其实服务端 重定向也是不行的，因为是一个 ajax 的请求，所以服务端的重定向不起任何作用，它不会让页面重定向到新的页面。）
