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

问题描述：

是否可以在表单的onsubmit（）中发送ajax请求？我一直在尝试，结果很差，主要是因为如果浏览器发送我的请求比发送原始表单需要更长时间，那么一旦加载页面的位置发生变化，我的请求就会被丢弃，所以有时候从来没有碰到服务器。在表单提交之前发送Ajax请求

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

如果您为AJAX请求使用特定的JavaScript框架，请告诉我，我可以给您一个更具体的答案。 – 2009-08-11 23:35:09

答

这很容易实现。只需暂停表单提交，直到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>

如果我在发送Ajax请求后立即对Ajax请求的结果不感兴趣并想要提交表单，该怎么办？我仍然可以使用这种方法，并在'startAjax（）'函数本身中进行明确的表单提交吗？ – 2013-12-24 18:32:03

不会进入循环吗？ – 2017-03-14 14:32:51

答

还有另一种方式来解决这个问题，那就是你可以在Ajax调用的同步。

例子：

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

通过这一点，我们可以确保表单提交会等到Ajax调用得到的回应。

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

答

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

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

相关推荐