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 的请求,所以服务端的重定向不起任何作用,它不会让页面重定向到新的页面。)

相关推荐
八荒启·交互动画27 分钟前
# Web特效020—让 Web 特效真正动起来:时间循环应该怎么接
前端·webgl·网页特效·八荒启-交互动画·八荒启
动恰客流统计28 分钟前
线下零售数字化浪潮下,客流统计的3个核心发展趋势
大数据·前端·人工智能
用户938515635071 小时前
从小米前端面试题,彻底搞懂闭包、作用域链与 useState 惰性初始化
前端·面试
粥里有勺糖2 小时前
视野修炼第133期 | Native 回春了?
前端·github·agent
aichitang20242 小时前
前端小skill
前端·人工智能·算法·ai·前端框架
前端·柱子3 小时前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端·html·canva可画
葡萄城技术团队3 小时前
SpreadJS V19.2新特性揭秘:功能区键盘提示
前端
计算机魔术师3 小时前
AI 幻觉导致的错误情报险些引发美军拦截中国船只
前端
万物智能3 小时前
SARADC模数转换—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端
志尊宝4 小时前
Vue3 零基础每日笔记(037):动手封装 useMouse 与 useWindowSize——事件监听的标准模板
前端·javascript·vue.js·笔记·html5