以 $("#id").submit in vanilla - Javascript 为主题的介绍

如果您是一个希望在前端开发中使用纯Javascript来控制表单提交的程序员，可能会对使用 "$("#id").submit" 的方法感到头痛。在Vanilla-Javascript中，我们需要采取另一种方法来控制表单提交。

什么是Vanilla-Javascript？

Vanilla-Javascript是指在没有使用第三方库（如jQuery等）的情况下，纯粹使用Javascript来编写代码。即使在今天，由于它的灵活性和轻量级的特性，Vanilla-Javascript仍然是许多前端开发人员的首选。

在Vanilla-Javascript中控制表单提交

在Vanilla-Javascript中，我们需要使用事件监听器来控制表单提交。我们可以使用以下代码来阻止表单默认的提交行为：

const form = document.querySelector("#id");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  // 你的代码…
});

以上的代码中，我们先使用"document.querySelector()"方法来获取表单元素，然后使用"addEventListener()"来添加一个事件监听器。在事件监听器中，我们使用"event.preventDefault()"方法来阻止表单的默认提交行为。这将允许我们自己控制表单的提交。

在Vanilla-Javascript中提交表单

如果我们需要在事件监听器中手动提交表单，我们可以使用以下代码：

const form = document.querySelector("#id");
form.addEventListener("submit", function(event) {
  event.preventDefault();

  // 执行表单提交的相关逻辑
  const formData = new FormData(form);
  // …

  // 手动提交表单
  form.submit();
});

以上的代码中，我们通过创建一个"FormData"对象来获取表单中的数据。然后我们手动调用"form.submit()"方法来提交表单。

需要注意的是，"form.submit()"方法只适用于POST提交方式。如果表单使用的是GET提交方式，我们需要动态构建URL来使用"window.location.href"方法进行跳转。

总结

使用Vanilla-Javascript控制表单提交需要我们使用事件监听器来手动控制表单的提交行为。在事件监听器中，我们可以手动提交表单并传递相关的数据。Vanilla-Javascript的优点在于它的轻量级和灵活性，许多前端开发人员在开发过程中仍然选择使用它。