如何在页面完成加载时发出 AJAX 请求，由 window.location.href 触发答案

【问题标题】：How to make an AJAX request when page finishes loading, that is triggered by window.location.href如何在页面完成加载时发出 AJAX 请求，由 window.location.href 触发
【发布时间】：2019-07-17 23:33:00
【问题描述】：

我有一个这样的事件监听器

function navBtn() {
$('#navBtn').on('click', (event) => {
    window.location.href = 'someotherfile.html';
    myAJAXrequest();
})
}

问题似乎是，由于事件侦听器是点击，它们都会被触发。但是当我被发送到另一个页面时，AJAX 请求永远不会发生。不确定如何通过单击按钮重定向到另一个页面，当该页面包含使用 AJAX 调用添加的内容时，不会发生这种情况。有没有办法在触发 AJAX 之前检查我指向的新页面是否先加载？

【问题讨论】：

为什么不先运行ajax调用，然后在回调中重定向到新页面？
myAJAXrequest 永远不会被调用，因为加载了一个新文档。即使在加载新页面之前调用它也无济于事，在这种情况下，挂起的 AJAX 调用将被取消（除非您在 AJAX 回调中重定向）。请参阅navigator.sendBacon 了解可能的解决方案。
你能分享一下myAJAXrequest() 的样子吗？我们或许可以为您提供一些指导，告诉您如何重组代码以实现您想要的功能。

标签： javascript jquery html ajax dom

【解决方案1】：

尝试制作“myAJAXrequest()”异步函数

async function myAJAXrequest(){}; 

function navBtn() {

$('#navBtn').on('click', (event) => {

    await myAJAXrequest();

    window.location.href = 'someotherfile.html';  
})
}

【讨论】：

【解决方案2】：

您可以使用 setTimeout 函数，它会延迟重定向一段时间，届时您的 ajax 将被执行。这是示例代码。

function navBtn() {
        $('#navBtn').on('click', (event) => {
            myAJAXrequest();
            setTimeout(function () {
                window.location.href = 'someotherfile.html';
            }, 3000)
        })
    }

这里我给出了3秒的延迟，你可以随意增加或减少延迟。

【讨论】：