Question

我几乎完成了我的工作，除重定向外，其他所有工作都正常，现在我将向您展示。

因此，我有一个网站，并设置了HTML，CSS，PHP，MySqli，最后（听起来似乎很奇怪）我打算添加一些JS。

我需要填写我的登录表单，一切似乎都可以正常工作。

HTML + CSS + JS代码：

            <!DOCTYPE html>
         <html lang="en">
     <head>
        <meta charset="utf-8">
            <title>Home</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <style>
        #form-mes1{
            background-color: rgb(255, 232, 232);
            border: 1px solid red;
            color: red;
            display: none;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 20px;
            padding: 15px 25px;
            max-width: 450px;
        }
    </style>
        <body>
            <header>
                <div class="container1">
                        <img src="img/header.png" alt="logo" class="logo">
                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="services.html">Services</a>
                            <li><a href="contact.html">Contact</a></li>
                            <li><a href="profile.html">Profile</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <div class="container3">    
                <form class="login-form2" method="post" action="login.php">
                    <ul id="form-mes1">
                        <li>Generic Error #1</li>
                    </ul>

                    <label for="email">E-Mail</label>
                    <input type="email" id="email" name="logemail" class="input">

                    <label for="password">Password</label>
                    <input type="password" id="password" name="logpassword" class="input">

                    <button type="submit" id="btn_submit" name="sButton" class="btn2">LOGIN</button>


                </form>
            </div>  

            <script>
                const container3 = {
                    email: document.getElementByID('email'),
                    password: document.getElementByID('password'),
                    submit: document.getElementByID('btn_submit'),
                    messages: document.getElementByID('form-mes1')
                };

                container3.submit.addEventListener('click', () => {
                    const request = new XMLHttpRequest();

                    request.onload = () => {
                        let responseObject = null;

                        try{
                            responseObject = JSON.parse(request.responseText);
                        }catch(e){
                            console.error('Cannot Pass JSON');
                        }

                        if(responseObject){
                            handleResponse(responseObject);
                        }
                    };

                    const requestData = `email=${container3.email.value}&password=${container3.password.value}`;

                    request.open('post', 'login.php');
                    request.setRequestHeader('Content-type', 'application/x-www-form-urldecoded');
                    request.send(requestData);
                });

                function handleResponse(responseObject){
                    if(responseObject.ok){
                        location.href = 'dashboard.html';
                    }else{
                        while(form.messages.firstChild){
                            form.messages.removeChild(container3.messages.firstChild);
                        }

                        responseObject.messages.forEach((message) => {
                            const li = document.createElement('li');
                            li.textContent = message;
                            container3.messages.appendChild(li);
                        });

                        container3.messages.style.display = "block";
                    }
                }
            </script>
        </body>

这是我的PHP代码：

<?php

$ok = true;
$messages = array();

if(isset($_POST['sButton'])){

    if(empty($_POST['logemail']) or empty($_POST['logpassword'])){
        $ok = false;
        $messages[] = "Values Can't Be Empty";
    }elseif($ok){

        $email = $_POST['logemail'];
        $password = $_POST['logpassword'];

        $conn = mysqli_connect("localhost", "root", "");

        $db = mysqli_select_db($conn, "car_accs");

        $query = mysqli_query($conn, "SELECT * FROM accounts WHERE Mail = '$email' AND Password = '$password'");

        $rows = mysqli_num_rows($query);
        if($rows == 1){
            $ok = true;
            $messages[] = "Successful Log In";
        }else{
            $ok = false;
            $messages[] = "Failed To Log In";
        }
        mysqli_close($conn);
    }
}
echo json_encode(
    array(
        'ok' => $ok,
        'messages' => $messages
    )
);

 ?>

一切正常，如果我错过了邮件或密码，我会收到消息：

如果我输入了不正确的数据，则会收到相同类型的消息：

{“确定”：false，“消息”：[“无法登录”]}

如果我成功登录，则会显示以下消息：

{“确定”：true，“消息”：[“成功登录”]}

但是，我的想法是，如果我成功登录，则需要重定向，如您在JS代码中看到的那样，否则，我的显示框会在红色框中显示错误。

出了点问题，JS代码几乎不起作用，我也不明白为什么，任何帮助都将是惊人的。

Answer 1

所以问题出在JS和HTML之间的联系上。

第一个问题是关于我创建的DIV的，它不能使用addEventListener属性以及输入，我同时使用了ID和Class，这是一个错误，程序只是不能继续工作而已休息。

在将DIV和输入都更改为“仅ID”选项（需要将CSS直接写入HTML文件）之后，我再次编写了JS代码，一切顺利。

这是HTML + CSS + JS代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>Home</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <style>
        .form{
            background-color: white;
            box-sizing: border-box;
            padding: 40px;
            clear: both;
            height: 550px;
            width: 450px;
            margin: 100px auto;
            color: #24E7B9;
            font-size: 18px;
        }
        #form-messages{
            background-color: rgb(255, 232, 232);
            border: 1px solid red;
            color: red;
            display: none;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 20px;
            padding: 15px 25px;
            max-width: 450px;
        }
        #mail,
        #pass{
            width: 100%;
            box-sizing: border-box;
            padding: 20px;
            margin-bottom: 25px;
            border: 2px solid #24E7B9;
            color: black;
            font-size: 16px;
            outline: none;
            transition: all 0.5s ease;
        }
        #btn-submit{
            width: 100%;
            background-color: #24E7B9;
            height: 60px;
            text-align: center;
            line-height: 60px;
            text-transform: uppercase;
            color: white;
            font-weight: bold;
            letter-spacing: 1px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
        <body>
            <header>
                <div class="container1">
                        <img src="img/header.png" alt="logo" class="logo">
                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="services.html">Services</a>
                            <li><a href="contact.html">Contact</a></li>
                            <li><a href="profile.html">Profile</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <div class="form">
                <ul id="form-messages"></ul>

                <label for="mail">E-Mail</label>
                <input type="mail" id="mail">

                <label for="pass">Password</label>
                <input type="password" id="pass">

                <button type="submit" id="btn-submit">Login</button>

            </div>



            <script>
                const form = {
                    mail: document.getElementById('mail'),
                    pass: document.getElementById('pass'),
                    submit: document.getElementById('btn-submit'),
                    messages: document.getElementById('form-messages')
                };

                form.submit.addEventListener('click', () => {
                    const request = new XMLHttpRequest();

                    request.onload = () => {
                        let responseObject = null;

                        try{
                            responseObject = JSON.parse(request.responseText);
                        }catch(e){
                            console.error('Could Not Pass JSON');
                        }

                        if(responseObject){
                            handleResponse(responseObject);
                        }
                    };

                    const requestData = `mail=${form.mail.value}&pass=${form.pass.value}`;

                    request.open('post', 'login.php');
                    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                    request.send(requestData);
                });

                function handleResponse(responseObject){
                    if(responseObject.ok){
                        location.href = 'dashboard.html';
                    }else{
                        while(form.messages.firstChild){
                            form.messages.removeChild(form.messages.firstChild);
                        }
                        responseObject.messages.forEach((message) => {
                            const li = document.createElement('li');

                            li.textContent = message;
                            form.messages.appendChild(li);
                        });

                        form.messages.style.display = "block";
                    }
                }

            </script>
        </body>

这是PHP代码：

<?php

$mail = isset($_POST['mail']) ? $_POST['mail'] : '';
$pass = isset($_POST['pass']) ? $_POST['pass'] : ''; 

$ok = true;
$messages = array();


if(!isset($mail) OR empty($mail)){
    $ok = false;
    $messages[] = 'Mail Cannot Be Empty';
}

if(!isset($pass) OR empty($pass)){
    $ok = false;
    $messages[] = 'Password Cannot Be Empty';
}   


if($ok){
    $mail = $_POST['mail'];
    $pass = $_POST['pass'];

    $conn = mysqli_connect("localhost", "root", "");

    $db = mysqli_select_db($conn, "car_accs");

    $query = mysqli_query($conn, "SELECT * FROM accounts WHERE Mail = '$mail' AND Password = '$pass'");

    $rows = mysqli_num_rows($query);
        if($rows == 1){
            $ok = true;
            $messages[] = "Successful Log In";
        }else{
            $ok = false;
            $messages[] = "Failed To Log In";
        }
        mysqli_close($conn);

}
   echo json_encode(
    array(
        'ok' => $ok,
        'messages' => $messages
    )
);

?>

重定向和连接问题已解决。谢谢大家。

PHP和JS-连接，错误消息和重定向

1 个答案: