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

Question

我的表单不断提交然后刷新，所以我查看了 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);   

    }

}

?>

JS

$("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”。

所以我发现了一些非常好奇的事情。当我将 if 语句更改为 if(isset($_POST['code']){} 正如一些人在评论中敦促我所做的那样，并且我输入了正确的密码时，它遵循正确的循环并且产生此错误:

VM1368 jquery.min.js:2 GET http://localhost:8080/assessment 404 (Not Found)

但是，它不会生成我放在 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();      
    });
});