发送 AJAX 请求时未显示引导模式

Question

我试图在等待 AJAX POST 请求返回时显示模式，但在发出 POST 请求后显示模式。 模态应该显示在表单提交上，当我不发出 POST 请求但稍后显示 POST 请求时，这有效。

这是我的模态：

<div
      class="modal fade"
      id="loadingModal"
      tabindex="-1"
      aria-labelledby="loadingModalLabel"
      aria-hidden="true"
    >
      <div
        class="modal-dialog modal-dialog-centered"
        style="width: 300px; margin: auto"
      >
        <div class="modal-content">
          <div class="container text-center animationContainer">
            <h2>Drone Initialising</h2>
            <p>Please Wait</p>
            <div class="row">
              <div class="col-md-8 mx-auto">
                <lottie-player
                  src="https://assets10.lottiefiles.com/packages/lf20_2rqike9d.json"
                  background="transparent"
                  speed="1"
                  style="width: 250px; height: 250px"
                  loop
                  autoplay
                ></lottie-player>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

这是用于激活模态的 JS 代码：

$('#destination_form').on("submit", function(e) {  
   
    // $('#loadingModal').modal('show'); This works without the POST request
    
    var x = document.forms['destinationForm']['xCoord'].value;
    var y = document.forms['destinationForm']['yCoord'].value;
    var altitude = document.forms['destinationForm']['altitude'].value;
    var velocity = document.forms['destinationForm']['velocity'].value;

    requestUrl = Url + "sendFlightParams";

    console.log(JSON.stringify({
        "xCoord": x,
        "yCoord": y,
        "altitude": altitude,
        "velocity": velocity
    }));
    $.ajax
    ({
        type: "POST",
        url: requestUrl,
        async: false,
        crossDomain: true,
        contentType: "application/json",
        data: JSON.stringify({
            "xCoord": x,
            "yCoord": y,
            "altitude": altitude,
            "velocity": velocity
        }),
        beforeSend: function(){
            $('#loadingModal').modal('show'); // show modal here
        },
        success: function () {
            window.location.href = "videostream.html";
        },
        error: function(jqXHR, textStatus, errorThrown) { 
            console.log(errorThrown)
        }
    })

});

我不确定为什么在 POST 请求之后而不是之前显示模式。

Answer 1

我认为问题在于 $ajax 中的异步属性。

参考。 https://api.jquery.com/jquery.ajax/默认情况下，所有请求都是异步发送的。 请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

尝试将其设置为 true 或将其删除。

async: true,