如何通过jQuery AJAX根据JSON返回结果指定重定向跳转URL

现有代码问题 #

• 执行跳转赋值后，后续的通知、模态框隐藏、表格重载逻辑仍会执行，跳转后这些操作完全无意义
• 通知提示写死为固定成功文案，没有用到接口返回的message字段，无法对应失败/成功两种场景的提示
• 请求异常回调为空，网络错误或接口报错时用户没有任何感知

修正后可直接使用的代码 #

var frm = $('#form-process');

frm.submit(function(e) {
    e.preventDefault();

    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        dataType: "json",
        success: function(res) {
            if (res.result == "ok") {
                // 优先处理跳转逻辑
                if (res.redirect) {
                    // 如果需要先让用户看到提示再跳转，可以打开下面的延时注释
                    // $.notify(res.message, res.redirect.includes('approve_success') ? 'success' : 'error');
                    // setTimeout(() => {
                        window.location.href = res.redirect;
                    // }, 1500);
                    return; // 跳转后终止后续逻辑执行
                }
                // 无跳转需求时才执行下面的页面内操作
                $.notify(res.message || "操作成功", "success");
                $('#modalDateEst').modal('hide');
                table.ajax.reload();
            } else {
                $.notify(res.message || "系统异常，请联系管理员", "error");
            }
        },
        error: function() {
            $.notify("请求发送失败，请检查网络后重试", "error");
        }
    });
});

改动说明 #

• 跳转逻辑执行后添加return语句，终止后续冗余代码运行
• 提示文案优先使用接口返回的message字段，兼容成功/失败两种场景的差异化提示
• 补充了错误回调的提示逻辑，覆盖网络异常等场景
• 新增了可选的延时跳转方案，适合需要用户先看到操作提示再跳转的业务场景

内容的提问来源于stack exchange，提问作者user