Jquery表单-两个按钮-一个使用ajax，一个不使用

jquery form - two buttons - one to use ajax, one not

本文关键字：一个 ajax 表单 -两 按钮 Jquery      更新时间：2023-09-26

我有一个表单，我想在提交之前使用jquery对表单进行验证。如果我单击其中一个按钮，我让它通过ajax调用保存数据。对于另一个按钮，我想提交表单，但不让它通过ajax，只是用传统的方式提交，然后进入那个页面。

我在我的validate()函数中有submitHandler，它非常适合做ajax的东西，但是对于我不想使用ajax的其他按钮呢?我从validate()函数中删除submitHandler部分吗?如果是这样，那么我应该如何设置使用ajax?我要把它放在事件处理程序中吗?如果是，我应该如何设置它?

你不能只是创建2个不同的函数或只是一个参数化的布尔值，以表明是否发送ajax请求或只是提交表单?后者可以使用JQuery的submit函数来完成。

我认为最好的方法是绑定一个个人事件

$('form').on('submitajax submit', function(e){
    if(e.type === 'submitajax'){
        //ajaxstuff
    }
    else{
        //classic stuff
    }
})

你的ajax按钮将触发submitajax事件

您的验证函数可以像这样:

function bar( ajax )
{
  var valid = true, fooForm = $('#fooForm');
  // do validation stuff
  if( !valid ) return;
  if( ajax ){
   $.post(fooForm.attr('action'), fooForm.serialize());
  }else{
   fooForm.submit();
  }
}

和你的按钮:

<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />

提交表单时需要检查JavaScript事件。只考虑form:

<form class="js-form">
  <a class="js-save">Save</a>
  <input type="submit" value="Submit"/>
</form>

$('.js-from').on('click', function(event){
   if (event.target === event.currentTarget){
     # Triggers on click submit input that triggers as part of form and target same
     # Call ajax stuff
   } else {
     # Triggers on click link witch is fired as click as not a part of form
     # Call other ajax or link stuff
   }
});

一个检查表单是否在提交按钮或链接上提交的函数，可以做任何其他事情

我明白了。在我的ajax按钮单击事件处理程序中，我需要添加event.preventDefault ();然后，我可以将$.ajax()调用添加到我想要调用ajax的地方，而对另一个只是正常地进行提交。

感谢您的回复，这是一个有趣的练习，我学到了更多关于这种类型的编码的复杂性。

相关文章：