在表单提交时执行 ajax 请求，不要等待响应

Posted 2023-03-14

【中文标题】在表单提交时执行 ajax 请求，不要等待响应

【英文标题】：Execute ajax request on form submit and don't wait for response

【发布时间】：2013-10-23 10:05:31

【问题描述】：

我想在用户尝试提交表单时发出 AJAX 请求。但是，我不想等待响应（我只想触发一个脚本）并且仍然立即提交表单（或重定向用户）。

我尝试过这种方式（通过 jQuery）：

$(document).ready(function()

    $("#form").submit(function(e)
    
        // save object reference
        var form = this;

        // prevent form submit
        e.preventDefault();

        // trigger ajax request
        $.ajax(
            url: 'ajax.php',
            data:  ... ,
            cache: false
        );

        // submit form
        form.submit();

        // return false just in case
        return false; 
    );
);

但这不起作用，因为如果表单随后立即提交（通过form.submit()），浏览器实际上不会发送AJAX请求。

我有点疑惑……真的没有办法触发 AJAX 请求并在之后立即重定向浏览器吗？

【问题讨论】：

是什么让你说没有进行 ajax 调用？

您的网络标签对请求有何看法？

@Archer（和 tymeJV）：FireFox 开发工具的网络选项卡不会报告任何发送的请求，服务器也不会收到任何此类请求。

如果您注释掉 form.submit() 会发生什么 - 那么 ajax 调用是否有效？

@Archer 是的，ajax 调用将起作用。

【参考方案1】：

您似乎在这里创建了一个无限循环。您正在阻止提交事件并在最后再次提交，但是当您将函数绑定到表单的提交时，它将被一遍又一遍地调用。相反，尝试使用成功和完成等 Ajax 状态；成功提交数据，完成后重定向页面。

【讨论】：

没错，这看起来确实像一个无限循环，尽管从来没有发生过无限循环。表单由form.submit() 内的.submit(function(e) ...); 提交，浏览器打开表单定义的操作。我不想提交成功的表单，因为 AJAX 调用的成功与表单提交无关，但可能需要很长时间。我只想在提交表单之前立即通过此 AJAX 调用触发服务器上的脚本。那是我的目标；）。最后我创建了一个不同的解决方案，独立于表单提交。