window.onload = function() {
var a = document.getElementById("log-in");
a.onclick = function loadXMLDoc() {
var ajaxRequest;
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById("content");
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "/login.php", true);
ajaxRequest.send();
var a = document.getElementById("log-in");
a.innerHTML = "Sign up";
a.onclick = function backToIndex() {
window.location.href = "index.php";
return false;
}
return false;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CloudBox</title>
<link rel="shortcut icon" href="img/g3.ico" />
<script src="js/script.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />
</head>
<body>
<header class="shadow-box">
<a href="https://github.com/alexifrim95/CloudBox" id="git-img" class="github-img">
<img src="img/GitHub-Mark-32px.png" alt="github-logo" class="github-logo">
</a>
<a href="https://github.com/alexifrim95/CloudBox" id="git-link" class="github-link">GitHub link</a>
<a href="index.php" id="logo-img" class="logo-img">
<img src="img/g3.png" alt="logo" class="logo">
</a>
<a href="index.php" id="logo-txt" class="logo-txt"><img src="img/logo-text.png" alt="logo-text" class=logo-text"></a>
<a href="#" id="log-in" class="button-link">Log in</a>
</header>
<div id="content" class="content">
<h1 id="message" class="contentHeader">Cloud platform<br> built from scratch</h1>
<br>
<form id="form" method="post">
<h1 id="contentSignup" class="contentSignup">Sign up</h1>
<input type="text" name="fullname" placeholder="Fullname" required="required" />
<br>
<input type="text" name="email" placeholder="Email" required="required" />
<br>
<input type="text" name="username" pattern="[A-Za-z0-9]{4,30}" title="4 to 30 alphanumeric characters" placeholder="Username" required="required" />
<br>
<input type="password" name="password" pattern="[A-Za-z0-9]{6,25}" title="6 to 25 alphanumeric characters" placeholder="Password" required="required" />
<br>
<button type="submit" class="Submit" name="submit">Submit</button>
<?php include 'register.php';?>
</form>
</div>
<footer id="foot" class="bottom-page">
</footer>
</body>
</html>登录.php
<?php
session_start();
?>
<h1 id="message" class="contentHeader">Welcome<br>Please log in</h1>
<br>
<form id="form" method="post" style="height:250px;" ">
<h1 id="contentSignup" class="contentSignup">Log in</h1>
<input type="text" name="username" pattern="[A-Za-z0-9]{4,30}" title="4 to 30 alphanumeric characters" placeholder="Username" required="required" />
<br>
<input type="password" name="password" pattern="[A-Za-z0-9]{6,25}" title="6 to 25 alphanumeric characters" placeholder="Password" required="required" />
<br>
<button type="submit" class="Submit" name="submits">Submit</button>
<?php
if (isset($_POST['username']) && isset($_POST['password']) && isset($_POST['submits']))
{
$user = trim($_POST['username']);
$pass = trim($_POST['password']);
$file = "/private/data.csv";
$handle = fopen($file, "r") or die('ERROR OPEN FILE!');
while (($data = fgetcsv($handle)) !== FALSE) {
if ($data[0] == $username && $data[1] == hash('sha256', $password) ){
$_SESSION['user'] = $username;
header("Location: ./home.php");
$success = true;
break;
}
}
if (!$success)
{
echo '<script type="text/javascript">document.getElementById("message").style.color="red";</script>';
echo '<script type="text/javascript">document.getElementById("message").innerHTML="Wrong username or password";</script>';
}
fclose($handle);
}
?>
</form>
我有一个按钮，首先设置为“登录”，索引页面用于注册，然后单击它后，页面的内容 div 将使用 Ajax 请求和按钮上的“注册”值加载一个 login.php 页面。 问题是，当加载 ajax 请求页面时，我无法提交，提交按钮将我重定向到 index.php，即使它不应该这样做。
最佳答案
登录表单需要一个action属性，否则默认为当前页面的URL。
<form id="form" method="post" style="height:250px;" action="login.php">
通过 AJAX 加载它不会使其默认为 AJAX URL。
关于JavaScript Ajax 登录 PHP 页面请求不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41559542/