Question

我使用jquery在状态期间更改按钮样式（bootstrap＆amp; 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/

Answer 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

Answer 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

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

2 个答案: