在不重新加载页面 PHP Ajax 的情况下发送数据

Question

我正在尝试创建一个登录页面，在该页面中，每次登录尝试都会立即在页面上完成；而不是刷新页面。类似于 Google 如何创建登录页面，以及 Facebook 如何在不刷新的情况下提交消息。

我已经用 PHP 对页面的后端功能进行了编程，现在我想再给它一点点，让它看起来和功能异常出色。

这是我正在使用的当前 Ajax 脚本，它不想按照我想要的方式工作（我已经尝试过其他多个相同的结果）：

<script>
    $(function () {
        $('#_js_pdTr1').on('submit', function (e) {

            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'login_push.php',
                data: $('#_js_pdTr1').serialize(),
            });
        });
    });
</script>

这是页面的表单：

<form id="_js_pdTr1" action="" method="post">
    <h3>LOGIN</h3>
    <div class="err-disp-out">
        <?php
            if(!empty($errors)){
                echo output_errors($errors);
            }
        ?>
    </div>
    <input type="text" name="username" placeholder="Username"><br><br>
    <input type="password" name="password" placeholder="Password"><br><br>
    <input id="remember" type="checkbox" name="remember_me"><label for="remember">Remember Me</label><br><br>
    <button id="_js_pdTr2" type="submit">Login</button>
</form>

在我的login_push.php 页面上，这是 PHP：

include 'core/init.php';
logged_in_protect();

$user = $_POST['username'];
$pass = $_POST['password'];

$user = preg_replace("/[^a-z0-9_\s-]/", "", $user);
$user = preg_replace("/[\s-]+/", " ", $user);
$user = preg_replace("/[\s_]/", "-", $user);

if(!empty($_POST)){
    if(isset($user) && isset($pass)) {
        $result = mysqli_query($conn, "SELECT * FROM users WHERE username = '$user'");
        if(mysqli_num_rows($result) == 0) {
            $errors[] = 'The username or password are incorrect.';
        } else {
            $passR = mysqli_query($conn, "SELECT * FROM users WHERE username = '$user'");
            while($row = mysqli_fetch_array($passR)){
                $dbHash = $row['password'];
                if(password_verify($pass, $dbHash)){
                    $activeQ = mysqli_query($conn, "SELECT active FROM users WHERE username = '$user'");
                    while($row = mysqli_fetch_array($activeQ)){
                        $active = $row['active'];
                        if($active == 0){
                            $errors[] = 'This user has not activated their account.';
                        } else {
                            $remember_me = ($_POST['remember_me'] == "on") ? 1 : 0;
                            if(isset($_POST['remember_me']) && $remember_me == 1){
                                $_SESSION['user_log'] = time() + 7889238;
                            } else {
                                $_SESSION['user_logi'] = time() + 3600;
                            }
                            $_SESSION['user_id'] = $user;
                            header('location: ./user');
                        }
                    }
                } else {
                    $errors[] = 'The username or password are incorrect.';
                }
            }
        }
    } else {
        header('location: ./');
    }
}

差不多，我想要的是：

表单提交后，会将表单中的所有数据推送到login_push.php页面，该页面上的PHP会继续运行。

它将查询数据库并将信息发送回原始页面，如果变量$errors不为空，它将自动在页面上回显（在form code block的第6行回显），而不刷新页。但是，如果变量为空，它会记录它们！

感谢所有帮助，

干杯！

编辑：我已经测试了其他代码，但是，它没有按照我想要的方式工作。

Answer 1

不要在你的 ajax 中使用header('location: ./user');。你有一些重复的代码，比如$result = mysqli_query($conn, "SELECT * FROM users WHERE username = '$user'"); 你为什么不只调用一次呢？

你很容易受到 mysql 注入的影响，因为你没有转义你的变量。

您从$_POST 设置了$username，之后您检查了isset($_POST)，这是为什么呢？

无论如何，您需要使用 error 和 message 键回显成功/失败或 JSON 对象。

$result = [
    'error' => 0,
    'message' => ''
];
//You can do other validations here
if (!empty($_POST)) {

    //Do the dbhash here
    $sql = "SELECT COUNT(*) AS cnt FROM `users` WHERE `username` = '" . mysqli_real_query($conn, $_POST["username"]) . "' AND `password` =  '" . password_verify($_POST['pass'], $dbHash) . "'";
    $res = mysqli_query($conn, $sql);
    $row = mysqli_fetch_row($res);
    if ($row['cnt'] < 1) {
        $result = [
            'error' => 1,
            'message' => 'Bad username or password'
        ];
    }
    //You can add success message if you want
}
echo json_encode($result);

在你的 javascript 中：

$.ajax({
    type: 'post',
    url: 'login_push.php',
    data: $('#_js_pdTr1').serialize(),
    success: function(response) {
        if (response.error != 0) {
            //Show error here
        } else {
           window.location.href = './user'; //Better to use absolute path here
        }
    }
},'json');