在网站加载完成之前等待 AJAX 成功响应

Question

我想在 ajax 仍在收到响应时让我的网站保持加载状态，然后当 ajax 成功时，网站应该停止加载。

'still on loading progress' 表示您浏览器的选项卡进度条符号保持可见并旋转，表示网站仍在加载中。

请帮帮我，我没主意了。这绝对是一个有各种解决方案的初学者问题。

HTML 文件的源代码如下：

<!DOCTYPE html>

<html>
<body>

<pre id="response">This will be the response...</pre>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
try {
$.ajax({
  'url': 'https://example.com',
  'type': 'GET',
  'success': function (data) {
    //I want to only finish loading the page after this is executed
    document.getElementById("response").textContent = data;
  } });
} catch(err) {
  document.getElementById("response").textContent = err.message;
}
</script>
</body>

</html>

我上面的当前代码发生的事情是我的网站已经完成加载（选项卡中已经没有可见的旋转符号），即使 ajax 中的成功功能仍未执行或换句话说，仍在等待 ajax.

的回复

预先感谢您回答我的问题:)

Answer 1

AJAX 调用是异步的，因此它们无法阻止网页从浏览器的角度加载。一旦到达您的 HTML/JS 脚本的末尾，浏览器将停止在选项卡中显示“正在加载”符号，这在您的代码中将由于异步 AJAX.

一些快速的谷歌搜索让我找到了这个关于你可以传递给 jQuery AJAX: https://api.jquery.com/jQuery.ajax/ 的设置的文档。其中表示 AJAX 具有进行同步调用的设置 (async: false)。但我相信这不是真正推荐的点 AJAX 并且从您的前端发出的任何 REST 调用都是异步的并且不会阻止浏览器。但如果这是您的要求，这可能会奏效。 :)

在网站加载完成之前等待 AJAX 成功响应

Wait for AJAX success response before the website finishes on loading

html

javascript

ajax

jquery

script