javascript - 有人可以解释一下 onsubmit 和 action 之间的区别吗？

Question

我无法理解表单操作的用途。看来我可以通过将 onsubmit 值设置为该函数来使用 Javascript 函数处理表单数据。我在网上看到很多不同的例子，这些例子让我更加困惑。

有人可以告诉我这会做什么，也许可以给我一个例子，说明表单操作可以做什么，而“onsubmit”不能或不应该做什么？

<form onsubmit="someFunction()" action="???"> ... </form>

用户将在表单中输入信息，然后点击按钮“提交”该信息。 someFunction() 会用这些信息做一些事情...那么，表单操作负责什么？我见过一些示例，看起来它只是指定了一个页面 URL，告诉用户“感谢提交”之类的内容。

如果这令人困惑，我很抱歉。我不知道如何询问我的困惑。我正在寻找一个非常简单的答案，您可以向 child 提供该答案，了解该行代码对用户以及输入表单的信息意味着什么。

Answer 1

这里的区别很微妙但很重要:

• onsubmit 是一个事件属性，这意味着其中的任何 JS 都将在 submit 事件上被调用。
• action 告诉浏览器在以 GET 或 POST 请求提交表单内容时将表单内容发送到何处(默认为 POST，除非 method 另有指定) > 属性)，然后使用其发送的请求的结果重新加载页面。

action 属性的可定制性较差，因为它不会运行任何自定义 JavaScript，它所做的只是将数据发送到后端。另一方面，onsubmit 运行您的自定义 JavaScript，它可以执行您想要的任何操作(包括将数据发送到后端)。如果您需要做的只是在提交表单时运行一些客户端 JavaScript，请使用 onsubmit。如果您需要在表单提交时将数据发送到服务器，请使用 action。

通常，您不想同时使用两者，因为如果 action 将数据发送到您的后端，那么您的页面将重新加载。事实上，即使您没有指定 action 属性，页面仍然会重新加载，因为这是默认行为。当提交表单时使用 onsubmit 属性运行 JavaScript 时，您需要使用 event.preventDefault() 覆盖此默认行为，因此大多数 onsubmit 处理程序如下所示:

function onsubmitHandler(event) {
    event.preventDefault()
    // ... rest of the code ...
}