Javascript 如何防止在单击“提交”按钮时刷新页面

我有一个输入和一个提交按钮的表单

<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" />

我希望在提交表单时避免页面刷新。我尝试了e.preventDefault（）并返回false； 方法在我的java脚本中，但不起作用（此方法帮助我刷新页面，但不允许我将数据发送到php代码）

---

请帮助我解决此问题，请建议使用ajax代码解决此问题。

页面刷新将删除您以前的数据，以便保留它，您可以使用$.post（）或$.ajax（）

您可以通过在事件处理程序函数中添加以下两种内容之一来防止页面刷新

对于纯js

 return false;

对于jquery，您可以使用

e.preventDefault(); // e is passed to handler

您的完整代码如下所示

在js中使用$.post（）

function checkfunction(obj){
$.post("your_url.php",$(obj).serialize(),function(data){
 alert("success");
 });
 return false;
 }

html

或与onsubmit具有相同的效果

<form  onsubmit="return checkfunction(this)" method="post">

---

如果没有ajax，您只需在PHP中添加checked属性即可。因此，例如，如果您的无线电组的名称为

radio

，其中一个组的值为

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>

>

因此，当用户提交表单并再次显示时，即使页面刷新，也会像用户提交表单一样。

R1
<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>

R2
$（文档）.ready（函数（）{
$（'#go'）。单击（函数（）{
var val1=$（'input:radio[name=rbutton]：checked'）.val（）；
var datastring=“partialName=“+val1；
$.ajax({
url:“search.php”，
类型：“POST”，
数据：datastring，
成功：功能（数据）
{
$（“#结果”）.html（数据）；
}
});
});
});

我在表单中有“post”方法。返回false；e.预防违约（）；函数不允许我向php代码发送值。在“表单提交”按钮上单击，我不想执行任何代码，只想将表单值传递给php。@sujit edited。请看，您必须使用ajax（示例中为$.post）来发送数据，以防止出现这种情况problem@sujit你确定要使用AJAX吗？您必须通过AJAX发送表单数据，正如A.B所说，您只需使用return false或e.preventDefault（）防止默认表单提交。并通过AJAXHi将表单信息发送到PHP端，@Hossein Sh请您提供ajax代码将表单信息发送到PHP端（如您所述）。请提供我的工作代码。嗨@sugit，我完全不知道你的意思。但据我所知，您可以收集输入并将其作为JSON数据发送，或者序列化表单数据并将其作为JSON再次发送到PHP文件，然后使用

$\u POST

或

$\u GET

<?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>

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