单击表单内的按钮时，如何防止刷新页面

将type="button"添加到按钮中。

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

按钮的默认值type是submit，它会在您的案例中自行发布表单，并使其看起来像是刷新。

让getData()返回false。这会解决问题。

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

您所需要做的就是放置一个类型标记并制作类型按钮。

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

这解决了

问题是它触发了表单提交。如果您将getData函数设置为return false，那么它应该会阻止表单提交。

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

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

HTML

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

jQuery

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

如果您的按钮是默认的"按钮"，请确保您明确设置了类型属性，否则WebForm将默认将其视为提交。

如果您使用js，请这样做

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 
**If you use jquery use like this**

<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>


$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here
});

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

不要使用按钮标签，而是使用输入标签。像这样，

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

禁用按钮本身的javascript方法

document.getElementById("ID NAME").disabled = true;

一旦所有表单字段都满足您的条件，您就可以重新启用按钮

使用Jquery将类似于

$( "#ID NAME" ).prop( "disabled", true);

这是最好的解决方案：

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

注意：我的代码非常简单。

无论出于何种原因，在Firefox中，即使函数中有return false;和myform.preventDefault();，它也会在函数运行后刷新页面。我不知道这是否是一个好的做法，但它对我有效，我在action属性中插入javascript:this.preventDefault();。

正如我所说，我尝试了所有其他建议，它们在所有浏览器中都能正常工作，但Firefox除外，如果您有同样的问题，请尝试在操作属性javascript:return false;或javascript:this.preventDefault();中添加prevent事件。不要尝试使用javascript:void(0);，因为它会破坏您的代码。不要问我为什么：-(。

我不认为这是一种优雅的方式，但就我而言，我别无选择。

更新：

如果您收到错误。。。处理ajax后，删除属性action，并在onsubmit属性中执行函数，然后返回false：

onsubmit="functionToRun(); return false;"

我不知道为什么Firefox会有这么多麻烦，但希望这能奏效。

Return函数并非在所有情况下都有效。我试过这个：

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

这对我不起作用。

我试图在函数内部返回false，它对我有效。

function Reset()
{
    .
    .
    .
    return false;
}

我也面临同样的问题。问题出在onclick函数上。函数getData应该没有任何问题。它的工作原理是使onclick函数返回false。

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

我更新了@JNDPNT的答案，这样函数(getData(((就不必返回false；

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

我发现的一个简单问题是，如果您试图调用的函数名为submit，那么表单将以任何一种方式提交。

您需要重命名该函数以使页面不被重新加载

点击按钮时，在要调用的函数的启动中添加e.preventDefault();

示例：

    const signUp = (e) => {
    e.preventDefault()
    try {
    } catch (error) {
      console.log(error.message)
    }
  }

按钮代码：

            <input
              type='submit'
              name='submit-btn'
              id='submit-btn'
              value='Sign Up'
              onClick={signUp}
            />

您可以使用ajax和jquery来解决这个问题：

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>