【发布时间】：2019-04-21 17:31:23
【问题描述】：
我几乎完成了我的工作，除了重定向之外一切正常，现在我将向您展示。
所以，我有一个网站，用 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 代码几乎不起作用，我不明白为什么，任何帮助都会非常棒。
【问题讨论】：
-
检查开发者工具以查看请求是否按预期发送到 php，如果是，那么您的问题出在 JS 上
-
我猜它没有发送，一切正常，除了我现在无法使用 JS，因为没有人调用它，我不明白为什么
-
您已将事件侦听器添加到不发出事件的对象中，即名为 container3 的通用对象。您可能希望将该事件侦听器添加到表单中。
标签： javascript php redirect login