javascript - PHP & JS - 连接、错误消息和重定向

问题描述

我几乎完成了我的工作，除了重定向之外一切正常，现在我将向您展示。

所以，我有一个网站，用 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
    )
);

 ?>

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

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

{"ok":false,"messages":["登录失败"]}

如果我成功登录，此消息：

{"ok":true,"messages":["登录成功"]}

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

出了点问题，JS 代码几乎不起作用，我不明白为什么，任何帮助都会很棒。

标签： javascriptphpredirectlogin

解决方案

所以问题出在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
    )
);

?>

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

javascript - PHP & JS - 连接、错误消息和重定向

问题描述

解决方案

推荐阅读