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。由于请求是通过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>

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

2 个答案: