如何使 HTML 按钮不重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1878264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an HTML button not reload the page
提问by Ankur
I have a button (<input type="submit">). When it is clicked the page reloads. Since I have some jQuery hide()functions that are called on page load, this causes these elements to be hidden again. How do I make the button do nothing, so I can still add some action that occurs when the button is clicked but not reload the page.
我有一个按钮 ( <input type="submit">)。单击它时，页面会重新加载。由于我有一些hide()在页面加载时调用的jQuery函数，这会导致这些元素再次被隐藏。我如何让按钮什么都不做，所以我仍然可以添加一些在单击按钮时发生的操作但不重新加载页面。
回答by Jafar Rasooli
there is no need to js or jquery. to stop page reloading just specify the the button type as 'button'. if you dont specify the button type, browser will set it to 'reset' or 'submit' witch cause to page reload.
不需要js或jquery。要停止页面重新加载，只需将按钮类型指定为“按钮”。如果您不指定按钮类型，浏览器会将其设置为“重置”或“提交”，从而导致页面重新加载。
<button type='button'>submit</button>
回答by Andrew Hare
回答by user2868288
In HTML:
在 HTML 中：
<form onsubmit="return false">
</form>
in order to avoid refresh at all "buttons", even with onclick assigned.
为了避免刷新所有“按钮”，即使分配了 onclick 也是如此。
回答by Chris Gutierrez
You could add a click handler on the button with jQuery and do return false.
您可以使用 jQuery 在按钮上添加一个单击处理程序并返回 false。
$("input[type='submit']").click(function() { return false; });
or
或者
$("form").submit(function() { return false; });
回答by pestilence669
In HTML:
在 HTML 中：
<input type="submit" onclick="return false">With jQuery, some similar variant, already mentioned.
使用 jQuery，已经提到了一些类似的变体。
回答by ProgrammingWithRandy
You can use a form that includes a submit button. Then use jQuery to prevent the default behavior of a form:
您可以使用包含提交按钮的表单。然后使用 jQuery 来阻止表单的默认行为：
$(document).ready(function($) {
$(document).on('submit', '#submit-form', function(event) {
event.preventDefault();
alert('page did not reload');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
<button type='submit'>submit</button>
</form>回答by CommonCoreTawan
As stated in one of the comments (burried) above, this can be fixed by not placing the button tag inside the form tag. When the button is outside the form, the page does not refresh itself.
如上面的评论之一（埋藏）所述，这可以通过不将按钮标签放置在表单标签内来解决。当按钮在表单之外时，页面不会自行刷新。
回答by Gusstavv Gil
I can't comment yet, so I'm posting this as an answer.
Best way to avoid reload is how @user2868288 said: using the onsubmiton the formtag.
我还不能发表评论，所以我把它作为答案发布。避免重新加载的最佳方法是@user2868288 所说的：onsubmit在form标签上使用。
From all the other possibilities mentioned here, it's the only way which allows the new HTML5 browser data input validation to be triggered (<button>won't do it nor the jQuery/JS handlers) and allows your jQuery/AJAX dynamic info to be appended on the page.
For example:
从这里提到的所有其他可能性来看，这是允许触发新的 HTML5 浏览器数据输入验证的唯一方法（<button>不会这样做，也不会执行 jQuery/JS 处理程序）并允许您的 jQuery/AJAX 动态信息附加到页。例如：
<form id="frmData" onsubmit="return false">
<input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
<input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
<input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function() {
var tel = $("#txtTel").val();
var email = $("#txtEmail").val();
$.post("scripts/contact.php", {
tel1: tel,
email1: email
})
.done(function(data) {
$('#lblEstatus').append(data); // Appends status
if (data == "Received") {
$("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
}
})
.fail(function(xhr, textStatus, errorThrown) {
$('#lblEstatus').append("Error. Try later.");
});
});
});
</script>
