javascript - AJAX 发送的 POST 请求被重定向取消

我正在编写一个小脚本来捕捉链接点击，并将链接的 URL 保存到数据库表中，以跟踪某个页面上的每个链接被点击的次数。这些链接是指向外部网站的。

所以，我在我的 JavaScript 函数中捕获点击事件，使用 jQuery 向一个 PHP 页面发送 POST 请求，该页面将数据保存到 MySQL 中，然后 JavaScript 函数将用户重定向到他们点击的链接的 URL。

我遇到的问题是，似乎因为重定向，POST 操作从未完成。我已经通过在 POST 回调中调用重定向解决了这个问题，但这会增加几秒钟的延迟，因为它要等 POST 完成后才会被调用。我正在寻找一种方法，可以在无论 POST 成功还是失败的情况下立即发布数据并重定向用户。

这是带有变通方法的当前代码。它运行良好，但会增加延迟：

function trackClicks(event)
{
    var clicked = $(this).attr('href');

    $.post
    (
        $('#track-click-post-url').attr('value'),
        {
            action: 'track_landing_page_clicks',
            clicked_url: clicked,
            nonce: $('#track-click-nonce').attr('value')
        },
        function( response )
        {
            window.location = clicked;
        }
    );

    event.preventDefault(); 
}

这就是我想做的，但每次尝试时都无法完成：

function trackClicks(event)
{
    var clicked = $(this).attr('href');

    $.post
    (
        $('#track-click-post-url').attr('value'),
        {
            action: 'track_landing_page_clicks',
            clicked_url: clicked,
            nonce: $('#track-click-nonce').attr('value')
        }
    );

    window.location = clicked;
    event.preventDefault(); 
}

答案＃1

jQuery 不提供你所寻找的回调。以下是可用的准备状态：

Value   State   Description
0   UNSENT  open()has not been called yet.
1   OPENED  send()has not been called yet.
2   HEADERS_RECEIVED    send() has been called, and headers and status are available.
3   LOADING Downloading; responseText holds partial data.
4   DONE    The operation is complete.

你正在寻找 readystate 2，因为这是你最早意识到服务器已收到消息的状态。

这应该可以让你起步：

var xhr = new XMLHttpRequest();
xhr.open("POST", clicked);
xhr.onreadystatechange = function() {
    if (xhr.readyState >= 2) window.location = clicked;
};
xhr.send($('#track-click-post-url').attr('value'));

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 供进一步阅读。

答案＃2

既然你无论如何都会加载页面，为什么还要用 Javascript 发帖？

只需用新页面上点击的链接更新数据库。

也许可以使用引用 URL 来跟踪点击发生在哪个页面。

或者其他解决方法来确定点击发生在哪一页（例如 URL 参数）或其他方式。