如何根据Ajax请求的结果提交(或不提交)表单

How to submit (or not submit) a form based on the result of an Ajax request?

本文关键字：提交 表单 结果 何根 Ajax 请求      更新时间：2023-09-26

我的网站上有一个表单，用户可以在这里提交内容并获得结果

<form accept-charset="UTF-8" action="/submit-stuff" data-remote="true" method="post">
<!-- various form fields -->
<input type="submit" value="Run Code" id="submit-button">
</form>

在提交他们的信息到后端之前，我尝试在Javascript中获得结果。如果我能得到结果，我在Javascript中return false阻止表单提交。

$('#submit-button').click(function() {
   if(canGetResults()){
     //deal with submission and then
     return false;
   }
   //the button will work as usual if canGetResults is false or there's an error 
});

这工作得很好，但现在我想尝试通过另一个ajax请求获得结果，如果失败，只提交到我的常规后端。点击按钮后调用以下代码:

$.post("http://example.com/submit-stuff", json, function(data) {
  //do stuff with data
});

然而，它是异步的(所以我不能从它返回结果)，所以代码达到return false，即使当其他ajax尝试失败。我应该如何解决这个问题，所以它只提交到我自己的后端，当ajax尝试失败?

我可以改变$。Post到$。Ajax并使其同步，但通常不推荐这样做。或者，我可以在$.post回调中提交表单，但是我应该如何从那里提交整个表单?如果出现错误或http://example.com/submit-stuff不能工作，它还会提交吗?

提交处理程序应该始终阻止表单提交。

然后，如果Ajax代码返回一个OK，您应该调用表单的submit()方法。这将绕过提交处理程序并提交表单。

注意:在DOM对象上调用submit，而不是jQuery对象。jQuery有从其包装器触发事件处理程序的习惯。

您可以在提交函数中绑定ajax请求，并在必要时调用.post()事件:

 $("form").submit(function(e){
     e.preventDefault(); // <-prevents normal submit behaviour
     //only post if your ajax request goes your way
     $.ajax(url,function(data){
       //argument to post or not
       if(data=="success"){ postForm(); }          
     }); 
 });
function postForm(){
    $.post(
      "/submit-stuff"
      ,$( "form" ).serialize()
      ,function(data){
         //your code after the post
      }); 
}

如果你不想为你的postForm创建一个单独的函数，那么你可以把它放在包装器中，在它当前被调用的地方

相关文章：