如何防止在提交按钮单击时刷新页面答案

【问题标题】：How to prevent from page refresh on submit button click如何防止在提交按钮单击时刷新页面
【发布时间】：2014-12-25 14:36:08
【问题描述】：

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

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

关于表单提交表单输入数据去php下面的代码

if (isset($_POST['Search'])) {
$_SESSION["query"] = $_POST["mol"];
$_SESSION["action"] = $_POST["action"];
}

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

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

【问题讨论】：

您只需要使用 return false 或 e.preventDefault() 来阻止默认表单提交。并通过 AJAX 将您的表单信息发送到 PHP 端
嗨，@Hossein Sh 能否请您提供 ajax 代码以将表单信息发送到 PHP 端（如您所述）。请提供我的工作代码。
嗨@sugit，我不明白你的意思。但据我了解，您可以收集输入并将它们作为 JSON 数据发送，或者序列化您的表单数据并将它们作为 JSON 再次发送到您的 PHP 文件并使用 $_POST 或 $_GET 访问它

标签： javascript php jquery ajax

【解决方案1】：

页面刷新将删除您以前的数据，因此您可以使用 $.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

<input type='submit' onclick="return checkfunction(this)" />

或与 onsubmit 相同的效果

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

【讨论】：

我在表单中有“发布”方法。返回假；和 e.preventDefault();函数不允许我将值发送到 php 代码。
在表单提交按钮单击时，我不想执行任何代码，而只有表单值应该传递给 php。
@sujit 已编辑。看到你必须使用 ajax(例如 $.post) 来发送数据以防止这个问题
@sujit 你确定要使用 AJAX 吗？正如 A.B 所说，您必须通过 AJAX 发送表单数据

【解决方案2】：

如果没有 ajax，您可以简单地在 PHP 中添加选中的属性。因此，例如，如果您的广播组名称为 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>

所以当用户提交表单并且你再次显示它时，即使页面刷新也会像用户提交一样。

【讨论】：

【解决方案3】：

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

【讨论】：