發送 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,