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

Question

我的表单不断提交，然后刷新，因此我查看了如何防止表单提交后重新加载页面-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);   

    }

}

?>

JS

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

    // prevent page refresh
    e.preventDefault();

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

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

});

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

编辑：问题已缩小到php。 由于请求是通过javascript进行的，因此if-statement参数中的名称应该是什么。 不能是“ rp”。

所以我发现了一些非常好奇的东西。 当我将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在评论部分提供了我的原始问题的解决方案。 感谢他们和其他尝试提供帮助的人。

Answer 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();      
    });
});

Answer 2

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

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

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