javascript - 在函数调用 jquery 期间显示 div

Question

我想在 checkCoupon 触发时显示 #LoadingDiv，并在完成后让它消失，以显示该功能正在进行中。 checkCoupon 由点击按钮触发(不显示)。

我尝试了各种方法，包括创建另一个函数来包含在 onclick 事件中，我将其放在 ajax 调用的不同部分中，并尝试以不同的方式更改 CSS。它仍然不起作用。

知道如何获得此功能并在通话开始时正确显示吗？

function checkCoupon() {
  var coupon = document.getElementById('couponCode').value;
  var coupon_v = false;
  $('#LoadingDiv').css('display', 'block');
  $.ajax({
    type: 'post',
    url: 'coupon.php',
    async: false,
    data: {
      'coupon': coupon
    },
    success: function(data) {
      if (data != "empty") {
        coupon_v = data;
      }
    }
  })
}

<div id="LoadingDiv" style="display:none;">One Moment Please...<br />
  <img src="images/progressbar.gif" class="displayed" alt="" />
</div>

Answer 1

您可以隐藏 ajax complete 函数上的 div，该函数在请求完成时调用(在成功之后或错误回调被执行):

complete: function(){
  $('#LoadingDiv').hide();
}