在前端开发中，我们经常需要处理表单提交的逻辑。然而，在某些情况下，我们可能需要阻止默认的表单提交行为，并在一些操作完成后再手动提交表单。本文将介绍如何在调用 e.preventDefault() 后提交表单，并提供相应的示例代码。
什么是 e.preventDefault()?
在事件处理函数中，e.preventDefault() 是一个常用的方法，它可以阻止浏览器执行默认的事件行为。例如，在表单提交时调用 e.preventDefault() 可以阻止浏览器刷新页面并发送表单数据到服务器。这使得我们能够使用 JavaScript 来控制表单的提交过程。
如何提交表单
当我们需要在调用 e.preventDefault() 后手动提交表单时，可以使用以下步骤：
- 获取表单元素
- 构建表单数据
- 发送表单数据
获取表单元素
获取表单元素通常可以通过 document.querySelector() 或 document.getElementById() 方法来实现。例如，假设我们有以下表单：
<form id="my-form"> <input type="text" name="username" /> <button type="submit">Submit</button> </form>
可以通过以下方式获取表单元素：
const form = document.querySelector('#my-form');构建表单数据
要构建表单数据，可以使用 FormData 对象。FormData 对象允许我们使用键值对的方式来构建表单数据，这与表单提交时浏览器默认的行为是一致的。例如，要获取上面表单中的用户名，可以使用以下代码：
const formData = new FormData(form);
const username = formData.get('username');发送表单数据
最后，我们需要发送表单数据。由于我们已经阻止了表单的默认提交行为，因此可以使用 XMLHttpRequest 或 Fetch API 来发送表单数据。以下是使用 Fetch API 发送表单数据的示例代码：
-- -------------------- ---- -------
------------------------------- --- -- -
-------------------
----- -------- - --- ---------------
------------------------- -
------- -------
----- --------
--
-------------- -- -
----------------- --------- ----------------
--
------------ -- -
-------------------- ---------- ------- -------
---
---在上面的示例代码中，我们首先阻止了表单的默认提交行为，并使用 FormData 对象来构建表单数据。然后，我们使用 Fetch API 来发送表单数据。注意，我们将方法设置为 POST，表示我们要向服务器发送数据。在成功提交表单后，我们会在控制台上打印一条消息，否则我们会记录错误。
结论
本文介绍了如何在调用 e.preventDefault() 后手动提交表单，并提供了相应的示例代码。通过理解这些原理和技术，您可以更好地掌握表单的处理逻辑，从而提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27974