Я почти закончил свою работу, все работает, кроме перенаправления, и теперь я покажу его вам.
Итак, у меня есть веб-сайт, настроенный на 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": ["Failed To Login"]}
И если я успешно выполню вход,это сообщение:
{"ok": true, "messages": ["Успешный вход в систему"]}
Но идея заключается в том, что, если я вхожу в систему успешно, меня нужно перенаправитькак вы видите в коде JS, если нет, у меня есть окно отображения, которое показывает ошибки в красном поле.
Что-то идет не так, и код JS почти не работает, и я не понимаю почему, любая помощь будет просто потрясающей.