如何在香草 JS 中启动 ajax 加载程序？ [关闭]

Question

我用 ajax 在 vanilla js 中创建了一个导航，所以该网站没有刷新，只是我的 div class='ajax_container' 中的内容。当我点击导航中的一个元素时，我首先开始将我的 ajax_container 的 innerHTML 更改为我的加载器，女巫是/是一些 html div-tags 并开始一个 ajax 调用。如果状态为 4，我将 ajax_container 的 innerHTML 更改为 responseText。

现在我的问题是，这样做的好风格是什么。它运行完美，但感觉不自然，就像我存档了我的目标一样。

xhr.onloadstart = function () {
document.getElementById("ajax_container").innerHTML = "<div class='ring_loader'><div class='loader_ring_rotate'><div class='loader_ring' id='loader_ring_scale_one'></div></div><div class='loader_ring_rotate'><div class='loader_ring' id='loader_ring_scale_two'></div></div></div>";}

我的加载器的 css 包含在整个页面的标题中，当然，它还定义了样式和过渡。

Answer 1

难道你不能有一个“隐藏”的加载器，所以 style="display: none;" 或者，如果您真的愿意，也可以将整个加载器添加到 DOM，同样的逻辑。

然后您触发您的 AJAX 请求（位于函数中），首先显示加载程序块（因此取消隐藏），然后在回调块（响应是您的 ajax 响应）中再次隐藏加载程序。

类似：

function (On click of element {
    // Show spinner (so display = block or flex or whatever of that element)

    doAjaxRequest(parameters, function(callback) {
        // throw response into DOM (so callback.data or what you name it)
        // Hide spinner again
    });
});

我希望这是有道理的，如果需要，我可以扩展答案，但我希望你能明白它的要点。 （如果需要请告诉我）

Answer 2

嗯，好的，是的，我会将微调器保存在一个完全独立的容器 (div) 中，您只需通过 JS 显示/隐藏它（例如通过回调的示例）。

您的 PHP 端仅返回您的 AJAX 响应（您如何拥有它（没有微调器 obv）。我不知道您的意思是您必须在我的解决方案的每个文件中包含一个 PHP 脚本？我是什么'm 显示发生在 JS 中（显然不是您的 AJAX 请求，就像它一直以来的那样）。

但是，如果您真的只想在 DOM 实际“旋转”时将微调器放在您的 DOM 中，那么就不要像我上面的示例那样做，而是“显示微调器”实际上是“添加微调器”到您的 "ajax_container".innerHTML然后在加载 AJAX 响应之后，您只需再次替换 "ajax_container".innerHTML，然后再替换为您真正想要显示的内容？

因此，如果您正确理解，理想情况下您不希望“加载器”始终出现在您的页面上，但仅在您的 AJAX 实际“加载”时才出现。 所以是的，如果是这种情况，而不是显示/隐藏 div，请执行“添加微调器 html/添加其他 html”。