提交包含多个事件的 AJAX 表单答案

【问题标题】：Submit AJAX form with multiple events提交包含多个事件的 AJAX 表单
【发布时间】：2019-05-01 15:22:41
【问题描述】：

我有一个表单，当点击提交按钮时，它会发送一个 AJAX 请求。这适用于按钮点击：

$(#form).submit(function(event) {
  event.preventDefault();
  $.ajax({
    // ...
  })
});

表单数据使用data传递到ajax命令中的URL。

有没有一种方法可以提交此表单，并且可以在下拉更改 javascript/jQuery 事件上运行相同的 AJAX 函数？下拉菜单的形式相同。

我有它，所以当 AJAX 成功返回时，它会添加 HTML 以使用 table 填充 div，因此需要编写一次。

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

简短回答：“是的”。您可以从任何您喜欢的地方调用表单的“提交”方法。例如：

$("#someDropdown").change(function() { $("#form").submit(); });

演示：

$(function() {
  $("#someDropdown").change(function() {
    $("#form").submit();
  });

  $("#form").submit(function(event) {
    event.preventDefault();
    console.log($(this).serialize());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="someDropdown">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<hr>
<form id="form">
  <input type="text" name="text1" />
  <button type="submit">Submit</button>
</form>

文档：https://api.jquery.com/submit/

【讨论】：

哇哦！就这么简单。我以为我试过了，但我想我正在尝试在 .change() 中的 .submit() 中运行 event.preventDefault()。这很有意义。感谢您的帮助
@Ryan 没问题。如果答案对您有帮助，请记得将其标记为“已接受”（单击答案旁边的勾号使其变为绿色）-谢谢。