如何阻止表单按钮刷新页面？

使用表单按钮防止页面刷新

使用按钮创建表单时，通常会遇到单击按钮触发不需要的页面刷新的问题。这可能会出现问题，尤其是当页面包含刷新时重置的动态加载数据时。

问题描述

在提供的代码片段中：

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

点击按钮会调用getData()函数，但也会自动刷新页面。出现这种情况是因为表单中按钮的默认类型是“提交”，它会启动表单提交并重新加载页面。

解决方案

防止页面刷新，修改按钮的 type 属性为“button”，如下所示：

<button name="data" type="button" onclick="getData()">Click</button>

通过设置 type="button"，按钮不再发起表单提交。相反，它的行为就像一个常规按钮，仅触发指定的 onclick 事件，而不影响页面。

说明

type 属性定义按钮的类型。可能的值为：

• 提交： 提交表单。这是默认值。
• 重置：将表单重置为其初始状态。
• 按钮：充当自定义按钮，无需提交或提交重置表单。

通过设置 type="button"，您可以有效地将按钮转换为非提交按钮，仅触发所需的 JavaScript 函数，而不会导致页面刷新。

以上是如何阻止表单按钮刷新页面？的详细内容。更多信息请关注PHP中文网其他相关文章！