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

让返回 false。这将修复它。getData()

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

问题在于它触发了表单提交。如果您创建该函数，则它应该停止提交表单。getDatareturn false

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

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

添加到按钮。type="button"

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

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

[HTML全文]

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

jQuery的

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

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

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

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

更新：

如果您收到错误...处理完 AJAX 后，删除属性操作，并在属性中执行函数，然后返回 false：onsubmit

onsubmit="functionToRun(); return false;"

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

<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);

你可以使用 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>

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

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

这样就解决了问题

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

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

它对我不起作用。

我试图在函数中返回 false，它对我有用。

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

我面临着同样的问题。问题出在功能上。函数应该没有任何问题。它通过使函数返回 false 来工作。onclickgetDataonclick

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

如果你的按钮是默认的 “button”，请确保你显式设置了 type 属性，否则 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  type="button" name="data" onclick="getData()">Click Me</button>
</form>

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

我更新了@JNDPNT答案，这样函数（getData（））就不必返回false;

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

添加单击按钮时要调用的函数的启动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}
            />

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

您需要重命名该函数，以免重新加载页面