PHP и JS - подключение, сообщения об ошибках и перенаправление

ProgramBox

PHP и JS — подключение, сообщения об ошибках и перенаправление

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#javascript #php #redirect #login

#javascript #php #перенаправление #аутентификация

Вопрос:

Я в значительной степени закончил свою работу, все работает, кроме перенаправления, и теперь я покажу это вам.

Итак, у меня есть веб-сайт, настроенный с использованием 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}amp;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, «сообщения»: [«Не удалось войти в систему»]}

И если я успешно войду в систему, это сообщение:

{«ok»: true, «сообщения»: [«Успешный вход в систему»]}

Но идея в том, что если я успешно войду в систему, меня нужно перенаправить, как вы видите в коде JS, если нет, то у меня есть окно отображения, в котором ошибки отображаются в красном поле.

Что-то идет не так, и JS-код почти не работает, и я не понимаю почему, любая помощь будет просто потрясающей.

1. проверьте инструменты разработчика, чтобы узнать, поступил ли запрос на php, как ожидалось, если да, то ваша проблема связана с JS

2. Я думаю, он не отправляет, все работает отлично, за исключением того, что я физически не могу использовать JS прямо сейчас, потому что ничто не вызывает его, и я не понимаю, почему

3. Вы добавили прослушиватель событий к чему-то, что не генерирует события, к универсальному объекту с именем container3 . Вероятно, вы захотите добавить этот прослушиватель событий в форму.

Ответ №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}amp;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
    )
);

?>

Проблемы с перенаправлением и подключением решены. Спасибо всем.

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Используйте регулярное выражение для поиска шаблона, исключите другой

Произошел сбой при выполнении org.jetbrains.kotlin.gradle.internal.KaptExecution > java.lang.reflect.Исключение InvocationTargetException (нет сообщения об ошибке)

Пользовательский фильтр запросов для записей Elementor по полю связи (ACF)