JavaScript的Ajax請求的登錄PHP頁面無法正常工作

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>

的login.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，即使它不應該。

來源

2017-01-10 Comrade57

你應該把問題放在最上面。很難閱讀底部的一小段文字或散佈在很長一段代碼之間。人們想在面對100多行代碼之前理解這個問題 – clearlight

登錄表單需要action屬性，否則它默認爲當前頁面的URL。

<form id="form" method="post" style="height:250px;" action="login.php">

通過AJAX加載它並不會將其默認爲AJAX URL。

來源

2017-01-10 02:08:09 Barmar

JavaScript的Ajax請求的登錄PHP頁面無法正常工作

回答

相關問題