ajax成功后如何重置默认按钮答案

【问题标题】：How to reset default button after ajax successajax成功后如何重置默认按钮
【发布时间】：2016-01-14 13:48:15
【问题描述】：

我使用 jquery 在状态期间更改按钮样式（bootstrap 和 fontawesome）。单击按钮时，按钮将变为加载。一旦成功数据从 ajax 响应。一个按钮更改为完成。但完成后，我需要将按钮重置为默认状态。

代码如下：

    $(document).ready(function(){
        $("#printBtn button").click(function(){         
            $("#printBtn").html('<button type="button" class="btn btn-default btn-sq-lg disabled"><em class="fa fa-spinner fa-spin fa-5x"></em><br /><span>Printing...</span></button>');
            setInterval(function() {
            $.ajax({
                type: 'POST',
                url: 'inc/prvw_print.php',
                success: function(data) {
                    if(data=='success'){
                            $("#printBtn").html('<button type="button" class="btn btn-success btn-sq-lg"><em class="fa fa-check fa-5x"></em><br /><span>Done</span></button>');
                            setInterval(function() {
                                $("#printBtn").html('<button type="button" class="btn btn-danger btn-sq-lg"><em class="fa fa-print fa-5x"></em><br /><span>Print?</span></button>');
                            },500);
                        }else{                      
                            $("#printBtn").html('<button type="button" class="btn btn-warning btn-sq-lg"><em class="fa fa-warning fa-5x"></em><br /><span>Error</span></button>');
                    }//if
                }//success
            });//ajax
        },1000);//interval
        });//click
   });//ready

我再次在if(data='success') 中添加了 setInterval。希望它会在 0.5 秒后重置默认按钮。但事实并非如此。此处示例：https://jsfiddle.net/zdpkv2jh/

在这里工作更新：https://jsfiddle.net/zdpkv2jh/1/

【问题讨论】：

为什么不添加 disabled 属性，然后将其删除，而不是将其添加为类？
添加/删除disabled不会改变文字和图标。
试过setTimeout？而不是 setInterval
它不断地从btn-success切换到btn-danger永恒。
@Wilf 我不是指您要添加的课程。我指的是 disabled 属性：w3schools.com/tags/att_input_disabled.asp

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

您将setInterval 误认为setTimeout，因此您目前以这种方式每x 秒发出一次ajax 请求。这是我的建议，它不适用于 JSFiddle，因为它没有您在实际应用程序中请求的 URL：

$(document).ready(function() {
  $("#printBtn button").click(function() {
    $("#printBtn").html('<button type="button" class="btn btn-default btn-sq-lg disabled"><em class="fa fa-spinner fa-spin fa-5x"></em><br /><span>Printing...</span></button>');
    setTimeout(function() {
      $.ajax({
        type: 'POST',
        url: '',
        success: function(data) {
            if (data == 'success') {
              $("#printBtn").html('<button type="button" class="btn btn-success btn-sq-lg"><em class="fa fa-check fa-5x"></em><br /><span>Done</span></button>');
              setTimeout(function() {
                $("#printBtn").html('<button type="button" class="btn btn-danger btn-sq-lg"><em class="fa fa-print fa-5x"></em><br /><span>Print?</span></button>');
              }, 500);
            } else {
              $("#printBtn").html('<button type="button" class="btn btn-warning btn-sq-lg"><em class="fa fa-warning fa-5x"></em><br /><span>Error</span></button>');
            } //if
          } //success
      }); //ajax
    }, 1000); //interval
  }); //click
}); //ready

【讨论】：

是的。我建议您阅读您自己没有编写的功能的规范。那就是如果你之前没有使用过这些功能
非常感谢您的建议。我只是从 jquery 开始。
@Wilf 不客气。查看 Code School 的 JavaScript 资料，它可能会非常有用。
Magnudae，关于此的其他问题。为什么按钮刷新后操作不起作用？？？

【解决方案2】：

$(document).ready(function(){
        $("#printBtn button").click(function(){ 
            $("#printBtn").html('<button type="button" class="btn btn-default btn-sq-lg disabled"><em class="fa fa-spinner fa-spin fa-5x"></em><br /><span>Printing...</span></button>');

            $.ajax({
                type: 'POST',
                url: 'inc/prvw_print.php',
                success: function(data) {
                    if (data == 'success'){

                            $("#printBtn").html('<button type="button" class="btn btn-success btn-sq-lg"><em class="fa fa-check fa-5x"></em><br /><span>Done</span></button>');

                            setTimeout(function() {
                                $("#printBtn").html('<button type="button" class="btn btn-danger btn-sq-lg"><em class="fa fa-print fa-5x"></em><br /><span>Print?</span></button>');
                            }, 500);

                    } else {
                            $("#printBtn").html('<button type="button" class="btn btn-warning btn-sq-lg"><em class="fa fa-warning fa-5x"></em><br /><span>Error</span></button>');
                    }//if
                }//success
            });//ajax

        });//click
   });//ready

【讨论】：