如何防止表单刷新但在同一页面上提交表单数据？答案

【问题标题】：How to prevent form refresh but submit form data on same page?如何防止表单刷新但在同一页面上提交表单数据？
【发布时间】：2019-12-11 07:25:06
【问题描述】：

我的表单不断提交然后刷新，所以我查看了How to prevent page from reloading after form submit - JQuery 以找出如何阻止它。然而，答案的不同之处在于我的解决方案是我将表单提交给它自己。

这是我的代码：

HTML

<form autocomplete="off" method="post" name="rp">
    <input placeholder="Code" type="text" name="code" required>
    <button type="submit">Submit</button>
</form>

PHP

<?php 

$response = "";

if(isset($_POST['code'])){

    echo "<script> alert('test'); </script>";

    $password = $_POST["code"]; 

    $result = $connection->query("SELECT * FROM Users WHERE passwords = '$password' LIMIT 1");

    if($result->num_rows != 0) {  

        // unpack object
        $data = mysqli_fetch_array($result);

        // retrieves user ID  (set into a cookie for x amount of time?)
        $id = $data["ID"];                

        mysqli_close($connection);    

        echo "<script> alert('test 2'); </script>";
        $response = "test 2";
        header("Location: assessment.php");

    } else {

        $response = "test 3";
        echo "<script> alert('test 3'); </script>";
        mysqli_close($connection);   

    }

}

?>

$("form").submit(function (e) {

    // prevent page refresh
    e.preventDefault();

    var formData = $(this).serialize();

    // Make AJAX request
    $.post("login.php", formData);

});

我希望表单提交数据但不刷新。我做错了什么？

编辑： 问题已缩小到 php.ini。由于请求是通过 javascript 进行的，所以 if 语句参数中的名称应该是什么。不能是“rp”。

所以我发现了一些非常奇怪的东西。当我在 cmets 中将 if 语句更改为 if(isset($_POST['code']){} 并输入正确的密码时，它遵循正确的循环并产生此错误：

VM1368 jquery.min.js:2 GET http://localhost:8080/assessment 404（未找到）

但是，它不会生成我放在 header() 之前的警报代码。当我输入错误的密码时，它也不会做任何事情（即使我有一个 else 语句）。我已经更新了 php 部分以包含大部分代码。 $response 变量和 echo/alerts 用于调试。

最终编辑： 具有讽刺意味的是，我的调试都不起作用的原因是页面没有刷新，因此不会发生警报和变量更新。（我停止页面刷新的追求造成了所有这些问题）。 MH2K9 和 Toni Michel Caubet 在评论部分提供了我最初问题的解决方案。感谢他们和其他试图提供帮助的人。

【问题讨论】：

建议：在$.post("login.php", formData);之后使用return false;
您的 JS 代码似乎没问题。您在控制台中收到任何错误吗？
您的其他一些 JS 可能会抛出错误，从而导致其他 JS 无法运行。
表单提交输入类型元素的值，但不是来自名称。你需要检查if(isset($_POST['code'])){ }。
哦，伙计，等 2 秒 @MH2K9 ^^

标签： javascript php jquery html ajax

【解决方案1】：

试试这个：

HTML：

<form autocomplete="off" method="post" name="rp" onsubmit="return false;">
    <input placeholder="Code" type="text" name="code" required>

    <br>
    <button type="submit">Submit</button>
    <button id="back_button" type="button"><img src="pics/back_arrow.png">Back</button>
</form>

JS：

$("form").submit(function (e) {
    // prevent page refresh
    e.preventDefault();
    var formData = $(this).serialize();
    // Make AJAX request
    $.post("login.php", formData , function(data) {
        alert(data);
        $("form").reset();      
    });
});

【讨论】：

稍微解释一下可能会有所帮助。问题是什么，你的代码是如何解决的？

【解决方案2】：

您也可以使用 HTML 中的onsubmit 属性调用函数。

<form onsubmit='return preventSubmit(e)'>
    // form content
</form>

<script>
    function preventSubmit(e) {
        e.preventDefault()
        return false
    }
</script>

【讨论】：