javascript - 确保更改页面后请求将完成

Question

问题是：我有使用 JavaScript 发送日志的自定义分析引擎。我想在用户提交表单后发送日志。使用 AJAX 发送日志。现在的问题是，表单提交不是AJAX，刷新页面是正常请求。

我已经了解到，即使客户端中止连接，您也可以强制执行脚本

用户离开页面后php执行是否停止？

我想学习的是，如果在发送 AJAX 调用后几乎立即提交表单，如何确保服务器接收请求和标头？

Answer 1

var url = "...";
var my_form = document.getElementsByTagName("form")[0];
var request_received = false;

my_form.addEventListener("submit", function(e) {
    if (!request_received) {
        e.preventDefault(); // prevent the form from submitting

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState >= 2 && !request_received) {
                request_received = true;
                my_form.submit(); // submit the form only if the request has been received
            }
        };
        xhr.open("GET", url, true);
        xhr.send();

        return false;
    }
}, false);

Answer 2

假设这是您的带有提交按钮的表单：

<form id="myForm" action="/myAction.html" method="POST">

    <!-- form inputs -->
    <input type="submit" value="submit me!" />

</form>

使用 JavaScript，您可以绑定到表单的提交事件，进行 ajax 调用，然后返回 true 以继续将表单提交到服务器：

<script type="text/javascript">

document.getElementById('myForm').addEventListener('submit', function(e){
    // do your ajax call here and when you finish, return true from
            // this function (in the ajax success callback)
    return true;
});

</script>