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

【问题标题】：Wait for AJAX success response before the website finishes on loading在网站完成加载之前等待 AJAX 成功响应
【发布时间】：2026-01-22 07:40:02
【问题描述】：

我想让我的网站在 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 的响应.

提前感谢您回答我的问题:)

【问题讨论】：

标签： javascript html jquery ajax script

【解决方案1】：

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

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

【讨论】：

非常感谢，它有效。我一直在寻找几个小时，无法相信单行代码是解决方案。现在我知道异步和同步 AJAX 的区别了。
不用担心。异步（和承诺）imo 是只有在遇到问题时才能理解的东西：D