javascript 如何防止在提交按钮单击时刷新页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27648131/
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 to prevent from page refresh on submit button click
提问by sujit
i have form with one input and one submit button.
我有一个输入和一个提交按钮的表单。
<form method='POST' action='' enctype='multipart/form-data' id="form_search">
<input type='hidden' name="action" id="form_1" value='1' />
</span><input id="query" type="text" name="mol" value="">
<input type='submit' value='Search' name="Search" id="Search" />
on form submission form input data goes to php below code
在表单提交表单输入数据转到 php 下面的代码
if (isset($_POST['Search'])) {
$_SESSION["query"] = $_POST["mol"];
$_SESSION["action"] = $_POST["action"];
}
i want to avoid page refresh on form submission. i tried e.preventDefault() and return false; methods in my java script but not working(this methods helping me from page refresh but does not allowing me to send data to php code)
我想避免在表单提交时刷新页面。我试过 e.preventDefault() 并返回 false；我的 java 脚本中的方法但不起作用（这些方法帮助我刷新页面但不允许我将数据发送到 php 代码）
please help me out of this problem, please suggest working ajax code for this problem.
请帮我解决这个问题，请建议使用 ajax 代码来解决这个问题。
回答by A.B
Page refresh will delete you previous data so to reserve it you can use $.post() or $.ajax()
页面刷新将删除您以前的数据，因此您可以使用 $.post() 或 $.ajax() 保留它
You can prevent page refreshing by adding one of these two things in event handler function
您可以通过在事件处理函数中添加这两件事之一来防止页面刷新
for pure js
对于纯js
return false;
for jquery you can use
对于 jquery，您可以使用
e.preventDefault(); // e is passed to handler
Your complete code will be something like
您的完整代码将类似于
using $.post()in js
在 js 中使用$.post()
function checkfunction(obj){
$.post("your_url.php",$(obj).serialize(),function(data){
alert("success");
});
return false;
}
html
html
<input type='submit' onclick="return checkfunction(this)" />
or same effect with onsubmit
或与 onsubmit 相同的效果
<form onsubmit="return checkfunction(this)" method="post">
回答by Markus
Without ajax you can simply add the checked attribute in PHP. So for example if your radio group has the name radioand one has value a, the other b:
如果没有 ajax，您可以简单地在 PHP 中添加 checked 属性。因此，例如，如果您的无线电组具有 nameradio并且一个具有 value a，则另一个b：
<?php
$a_checked = $_POST['radio'] === 'a';
$b_checked = $_POST['radio'] === 'b';
?>
<input type="radio" name="radio" value="a"<?=($a_checked ? ' checked' : '')?>></input>
<input type="radio" name="radio" value="b"<?=($b_checked ? ' checked' : '')?>></input>
So when a user submits the form and you display it again, it will be like the user submitted it even the page refreshes.
因此，当用户提交表单并再次显示它时，即使页面刷新，它也会像用户提交它一样。
回答by jay.jivani
<input type="radio" name="rbutton" id="r1">R1
<input type="radio" name="rbutton" id="r2">R2
<input type="button" id="go" value="SUBMIT" />
<div id="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#go').click(function(){
var val1 = $('input:radio[name=rbutton]:checked').val();
var datastring = "partialName="+val1;
$.ajax({
url: "search.php",
type: "POST",
data: datastring,
success: function(data)
{
$("#result").html(data);
}
});
});
});
</script>
