gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:59:20 28 4
gpt4 key购买 nike

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

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

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

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

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

最佳答案

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

  • 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 ...
}

关于javascript - 有人可以解释一下 onsubmit 和 action 之间的区别吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74931828/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com