如何在JSON响应status为true时才启用按钮切换注册标签页？

核心问题在于btn-next类自带的标签页切换逻辑会在点击按钮时立即触发，完全不受你的AJAX请求结果控制。要实现仅在AJAX返回e.status为true时切换标签页，我们需要把自动切换改成手动控制，具体步骤如下：

1. 移除按钮的自动切换类 #

先修改HTML里step1的提交按钮，删掉btn-next类——这个类是触发自动跳转的关键，去掉后点击按钮就不会直接跳转到下一个标签页了：

<!-- 原按钮代码 -->
<button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>

<!-- 修改后的按钮 -->
<button type="submit" class='btn btn-primary' name='next' value='Next'>Next</button>

2. 完善表单验证与AJAX回调逻辑 #

在Vue的handelSubmit方法中，先确保表单通过Parsley验证，再执行AJAX请求；只有当请求成功时，再手动触发标签页切换：

handelSubmit: function(e) {
    var vm = this;
    var form = $(e.target);
    
    // 先验证表单是否符合规则，不通过则直接返回
    if (!form.parsley().validate()) {
        return false;
    }

    data = {};
    // 这里补充你的表单数据收集逻辑

    $.ajax({
        url: '/add/post/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(res) {
            if (res.status) {
                alert("Success");
                vm.pid = res.pid;
                console.log(vm.pid);
                
                // 手动切换到step2标签页
                // 切换tab内容区的active状态
                $('#step1').removeClass('active');
                $('#step2').addClass('active');
                
                // 如果你的标签页有顶部导航栏（比如Bootstrap的tab导航），同步更新导航项的active状态
                // 示例：假设导航项是包含a标签的li元素，a的href对应tab的id
                // $('a[href="#step1"]').parent().removeClass('active');
                // $('a[href="#step2"]').parent().addClass('active');
            } else {
                vm.response = res;
                alert("Failed");
            }
        },
        error: function() {
            alert("请求出错，请稍后重试");
        }
    });
    return false;
}

额外说明 #

• 移除btn-next后，按钮的切换逻辑完全由我们的代码控制，只有AJAX成功时才会执行跳转。
• 增加表单验证检查，避免无效的AJAX请求。
• 如果使用的是Bootstrap标签页组件，记得同步更新导航项的active类，否则UI会出现内容和导航不匹配的情况。

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