使用 Javascript 修改 HTML 代码，其中有一些用于登录表单的 php 变量

Question

我在尝试创建登录表单时遇到以下问题。当用户输入错误的 userID/Password 时，将显示 bootstrap 小提示。

当凭据输入正确时，它将被重定向，但当输入错误的详细信息时，页面将被重新加载。

<?php
    $db=mysqli_connect('localhost','root','','hotel');
    if(isset($_POST['user_id'])) {
        session_start();
        $user_id = $_POST['user_id'];
        $password = $_POST['password'];

        $user_check = "select * from users where user_id = '$user_id' and password ='$password'";
        $result = mysqli_query($db, $user_check)
        or die("failed to query database" . mysqli_error());

        $row = mysqli_fetch_array($result);
        if ($row['user_id'] == $user_id && $row['password'] == $password) {
            $_SESSION['user_id'] = $_POST['user_id'];
            header('Location: reservation.php');
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="login_style.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body class="carousel-example-generic">
        <div class="container">
            <div class="loginbox form-group bg-dark">
                <div class="text-light">
                    <h1 class="text-center" style="padding-bottom: 5px">LOGIN</h1>
                    <form id="loginForm" action="" method="post" >
                        <p class="font-weight-bold">User ID</p>
                        <input type="text" id="user_id" name="user_id" placeholder="Enter Username" required>
                        <br><br>
                        <p class="font-weight-bold">Password</p>
                        <input type="password" id="password" name="password" placeholder="Enter Password" required>
                        <br><br><br>
                        <div id="alertLogin" class="alert-danger" style="visibility:hidden">
                            <p>The User ID or the Password is incorrect</p>
                        </div>
                        <input id="loginButton" type="submit" name="submit" value="Login">
                        <br>
                    </form>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function(e) {
                e.preventDefault();
                window.history.back();
                var a1 = <?php $row['user_id']?>;
                var b1 = <?php $row['password']?>;
                var a2 = $('#user_id').val();
                var b2 = $('#password').val();
                if (a1 != a2 || b1 != b2) {
                    $('#alertLogin').attr('style', 'visibility:visible');
                }
            })
        </script>
    </body>
</html>

Answer 1

检查更新代码：

<?php
    $db=mysqli_connect('localhost','root','','hotel');
    if(isset($_POST['user_id'])) {
        session_start();
        $user_id = $_POST['user_id'];
        $password = $_POST['password'];

        $user_check = "select * from users where user_id = '$user_id' and password ='$password'";
        $result = mysqli_query($db, $user_check)
        or die("failed to query database" . mysqli_error());

        $row = mysqli_fetch_array($result);
        if ($row['user_id'] == $user_id && $row['password'] == $password) {
            $_SESSION['user_id'] = $_POST['user_id'];
            header('Location: reservation.php');
        }
        else
           {?>
            <script>
                 alert("Wrong user name or password");
            </script>
           <?php 
        } 
    }
?>

Answer 2

window.history.back();每次到达时都重新加载页面，你打算在这里做什么？此外，下面的代码对我来说似乎不起作用，如果页面已重新加载 #user_id 并且 #password 没有价值，因为行 var a1 = ; 工作，你应该把 php 代码用引号括起来，否则 js 会把它解释为一个变量。我不知道 a1、a2、b1 和 b2 之间的比较是否有意义，登录没有失败是因为这些值不相等，登录失败是因为数据库中的值与用户输入的那些。最后一件事，您应该在将密码保存到数据库之前对其进行加密，并使用 mysql_real_escape_string() 来避免注入问题。

这是一种可能的解决方案（未测试）

<?php
    session_start();
    $db=mysqli_connect('localhost','root','','hotel');
    $login_error = false;
    if(isset($_POST['user_id'])) {
        $user_id = mysql_real_escape_string($_POST['user_id']);
        $password = mysql_real_escape_string($_POST['password']);

        $user_check = "select 1 from users where user_id = '$user_id' and password ='$password'";
        $result = mysqli_query($db, $user_check)
        or die("failed to query database" . mysqli_error());

        if ( mysqli_num_rows($result) > 0 ) {
            $_SESSION['user_id'] = $_POST['user_id'];
            header('Location: reservation.php');
        }else
        {
          $login_error = true;
        }
        
        
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="login_style.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body class="carousel-example-generic">
        <div class="container">
            <div class="loginbox form-group bg-dark">
                <div class="text-light">
                    <h1 class="text-center" style="padding-bottom: 5px">LOGIN</h1>
                    <form id="loginForm" action="" method="post" >
                        <p class="font-weight-bold">User ID</p>
                        <input type="text" id="user_id" name="user_id" placeholder="Enter Username" required>
                        <br><br>
                        <p class="font-weight-bold">Password</p>
                        <input type="password" id="password" name="password" placeholder="Enter Password" required>
                        <br><br><br>
                        <?php if($login_error){ ?>
                        <div id="alertLogin" class="alert-danger" style="visibility:hidden">
                            <p>The User ID or the Password is incorrect</p>
                        </div>
                        <?php } ?>
                        <input id="loginButton" type="submit" name="submit" value="Login">
                        <br>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

使用 Javascript 修改 HTML 代码，其中有一些用于登录表单的 php 变量

Modifying the HTML code using Javascript which has some php variables for the Login Form

javascript

php

html

login-control