在表单提交之前发送Ajax请求

Question

是否可以在表单的onsubmit（）中发送ajax请求？ 我一直在尝试它并且结果是不稳定的，主要是因为可能如果浏览器发送我的请求比发送原始表单需要更长时间，我的请求会在加载页面的位置发生变化时被丢弃，所以有时它从来没有打到服务器。

基本上，我想要做的是添加一个收集登录事件的审计日志收集器，我想以最小的入侵将其挂钩到现有的应用程序。

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>

Answer 2

还有另一种方法可以解决此问题，即您可以将ajax调用设置为同步。

例：

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

通过这个我们可以确保表单提交将等到ajax调用得到响应。

Answer 3

用onclick替换onsubmit它对我来说效果很好，因为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>