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

Posted 2023-05-08

【中文标题】发送 AJAX 请求时不显示引导模式

【英文标题】：Bootstrap Modal not showing when sending AJAX request

【发布时间】：2021-07-02 01:53:24

【问题描述】：

我在等待 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 请求之后而不是之前显示模式。

【参考方案1】：

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

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

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

async: true,