在 ajax 请求期间加载 Spinner Gif 不显示

Question

我正在尝试在 ajax 发生时显示加载微调器，但是我没有看到任何输出。 我可以确认微调器在那里，因为如果我删除 style="display: none;" 它会在页面加载时显示。但是我希望它在请求期间显示，但它没有这样做。我哪里错了？

此外，请求也会成功返回。

{% extends "layout.html" %}

{% block content %}

<form>
  <input type="text" name="name">
  <button type="button" class="submit" id="submit">Submittt</button>
</form>

<img src="https://i.stack.imgur.com/FhHRx.gif" style="display: none;" />
<div class="modal" name="modal" id="modal"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  $(document).ready(function () {

    $(document).on("click", ".submit", function () {

      alert(1)

      $(document).ajaxStart(function () {
        $('#modal').show();
      }).ajaxStop(function () {
        $('#modal').hide();
      });

      $(document).ajaxStart(function () {
        $('#modal').show();
      }).ajaxStop(function () {
        $('#modal').hide();
      });

      $.ajax({
        type: 'POST',
        url: "{{url_for('test_ajax')}}",
        data: {
        },
        success: function (response) {
          alert("success")
        },
      });


    });

  });
</script>
{% endblock content %}

Answer 1

你的代码应该是这样的

$(document).ajaxStart(function(){
    $('img').css({'display':'block'});
});

$(document).ajaxStop(function(){
    $('img').css({'display':'none'});
});

由于您需要更新 img 标签的属性并且您的模型没有任何可显示的内容。