Question

我有一个简单的AJAX请求，我想知道是否可以将加载状态按钮与我的请求结合起来。是否可以在请求完成时将按钮重置为默认值，而不是在重置之前选择例如5秒（按现在为止）？

加载状态按钮

$("button").click(function() {
    var $btn = $(this);
    $btn.button('loading');
    // simulating a timeout
    setTimeout(function () {
        $btn.button('reset');
    }, 1000);
});

AJAX请求

  $(function () {

    $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'POST',
        dataType:'html',
        url: '/m/core/_processEditEntry.php',
        data: $('form').serialize(),
        success: function () {
          $(".message").fadeIn(0);
          $(".message").delay(5000).fadeOut('slow');
        }
      });

    });

  });

Answer 1

最好将代码保存在同一个地方。删除单击处理程序并将这些行添加到ajax调用：

  $(function () {

    $('form').on('submit', function (e) {

      //save button so we can use later
      var my_button = $(this).find("button");

      //give button loading state
      my_button.button('loading');

      e.preventDefault();
      $.ajax({
        type: 'POST',
        dataType:'html',
        url: '/m/core/_processEditEntry.php',
        data: $('form').serialize(),
        success: function () {

          //reset state
          my_button.button('reset');

          $(".message").fadeIn(0);
          $(".message").delay(5000).fadeOut('slow');
        }
      });

    });

  });

Answer 2

你可以在按钮被点击时添加一个带有类的跨度

  if ($(this).is(".btn, .page-link, .df-link")) {
              // disable button
              $(".btn").prop("disabled", true);
              // add spinner to button
              $(this).html(
                `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ` + $(this).text()
              );
          }

然后在 Ajax 中完全删除该元素：

complete: function(response) {
                $(".btn").prop("disabled", false);
                $(".spinner-border").remove();
            }

当AJAX调用完成时，重置Bootstrap加载状态按钮

2 个答案: