仅当 json 响应为真时才启用下一个按钮（转到另一个选项卡）？答案

【问题标题】：Enable next button ( to go to another tab) only if json response is true?仅当 json 响应为真时才启用下一个按钮（转到另一个选项卡）？
【发布时间】：2018-06-08 15:35:39
【问题描述】：

这是html表单

    <div class="tab-pane" id="step1">
    <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">  
     **DATA COMES HERE**
    <div class="wizard-footer">
    <div class="pull-right">
    <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
</form>
    </div>

数据在这里

我的vue js脚本是

我只添加了ajax请求

 $.ajax({
              url: 'http://127.0.0.1:8000/post/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
              {
                alert("Success")
                vm.pid=e.pid;
                console.log(vm.pid);

            }
              else {
                vm.response = e;

               alert("Failed") 
              }
          }
            });

只有在成功的情况下，我才需要移动到下一个选项卡。但是现在，如果发生任何事情，它将移至下一个选项卡。仅当状态为真时，如何使按钮移动到下一个选项卡。仅当警报消息成功时。我需要移动到下一个选项卡。请帮我解决问题？

【问题讨论】：

e.status 是布尔字符串吗？
{"status": true, "pid": 1} 成功时
禁用按钮，然后当响应为真时，将 css 更改为假。例如：stackoverflow.com/a/1594992/4459647
v-on:submit.prevent 将停止页面重新加载

标签： javascript jquery html json vue.js

【解决方案1】：

MRustamzade 提到，他有正确的答案

1.在按钮上添加默认禁用

<div class="tab-pane" id="step1">
    <form data-parsley-validate="true" >  
     **DATA COMES HERE**
    <div class="wizard-footer">
    <div class="pull-right">
    <button type="submit" class='btn btn-next btn-primary' disabled name='next' value='Next'>Next</button>
    </form>
</div>

2.仅当 e.success = true 时删除禁用

$('form').submit(function(e){
    var data = $(this).serializeArray();
    var btn= $(this).find('.btn-next');
    var btnText = btn.text();
    $.ajax({
        url: 'http://127.0.0.1:8000/post/',
        data: data,
        type: "POST",
        dataType: 'json',
        beforeSend: function(){
            btn.prop('disabled', true).removeClass('.btn-primary').addClass('.btn-warning').text('wait');
        },
        success: function(e) {
        if (e.status)
          {
            btn.removeClass('.btn-warning').addClass('.btn-success').text('success');
            vm.pid=e.pid;
                        setTimeout(function(){
                            btn.prop('disabled',false).removeClass('.btn-success').addClass('.btn-primary').text(btnText);
            },2000);
        }
          else {
                        btn.removeClass('.btn-warning').addClass('.btn-danger').text('failed');
            vm.response = e;
            setTimeout(function(){
                            btn.removeClass('.btn-danger').addClass('.btn-primary').text(btnText);
            },2000);
          }


        },
        error: function(e){
            console.log(e); //for debug the error msg
            btn.removeClass('.btn-warning').addClass('.btn-danger').text('error');
            setTimeout(function(){
                btn.removeClass('.btn-danger').addClass('.btn-primary').text(btnText);
            },2000);
        }
    });
});

【讨论】：