单击窗体中的按钮时阻止刷新页面

Question

我在使用表单内的按钮时遇到问题.我想要那个按钮来调用功能.它确实如此,但是有了不必要的结果,它刷新了页面.

我的简单代码是这样的

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

单击该按钮时,将在页面刷新时调用该函数,该页面将重置我以前的所有请求,该请求会影响当前页面,这是前一个请求的结果.

我该怎么做才能阻止页面刷新？

Answer 1

在按钮上添加type ="button".

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

按钮的"type"的默认值是"submit",它会自动在您的情况下发布表单并使其看起来像刷新.

Answer 2

让我们getData()返回false.这将解决它.

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

Answer 3

问题是它触发了表单提交.如果您创建该getData函数,return false则应该停止提交表单.

或者,您也可以使用preventDefault事件对象的方法:

function getData(e) {
    e.preventDefault();
}

Answer 4

您需要做的就是放置一个类型标签并制作类型按钮.

<button id="btnId" type="button">Hide/Show</button>

这解决了这个问题

Answer 5

HTML

<form onsubmit="return false;" id="myForm">
</form>

$('#myForm').submit(function() {
    doSomething();
});