提交表单前发送Ajax请求

Question

在表单的onsubmit()方法中发送ajax请求是否可行？我一直在尝试，但结果并不稳定，这可能是因为如果浏览器发送我的请求花费的时间比发送原始表单的时间长，那么只要已加载页面的位置发生更改，我的请求就会被丢弃，有时甚至根本没有到达服务器。

基本上，我想添加一个审计日志收集器，用于收集登录事件，我希望将其与现有应用程序连接，而最小干扰。

- shipmaster

---

如果您正在使用特定的JavaScript框架进行AJAX请求，请告诉我，我可以给您更具体的答案。 - James Skidmore

Answer 1

这很容易实现。只需在 AJAX 请求完成之前暂停表单提交。

使你的表单的onsubmit属性调用 AJAX 函数并返回 false（取消表单提交）。当 AJAX 调用完成后，以编程方式提交表单。

例如：

<form name="myform" onsubmit="javascript: startAjax(); return false;">
...
<script type="text/javascript">
function startAjax() {} // Calls ajaxComplete() when finished

function ajaxComplete()
{
  document.myform.submit();
}
</script>

- James Skidmore

---

如果我对Ajax请求的结果不感兴趣，想要在发送Ajax请求后立即提交表单怎么办？我还能使用这种方法并在“startAjax（）”函数中执行显式表单提交吗？ - Web User

这不会进入一个循环吗？ - Timo Huovinen

onsubmit() 会导致一些循环问题。请使用onclick()代替。 - Optimaz ID

Answer 2

将 onsubmit 替换为 onclick 对我来说效果很好，因为 onsubmit 会进入循环。

<form name="myform" onclick="javascript: startAjax(); return false;">
...
<script type="text/javascript">
function startAjax() {} // Calls ajaxComplete() when finished

function ajaxComplete()
{
  document.myform.submit();
}
</script>

- user2396233

Answer 3

解决这个问题的另一种方法是将ajax调用设置为同步。

示例：

xmlhttp.open("GET", imageUrlClickStream, false);

通过这种方式，我们可以确保表单提交会等待ajax调用获取响应。

- Chandra

---

虽然这样做可能有效，但这是一种非常糟糕的做法。同步请求会冻结页面执行，因为浏览器必须等待响应才能继续执行任何其他JavaScript代码。 - HoLyVieR