javascript - 使用 AJAX 不使用 jQuery 在索引页和登录页之间切换 div 内容

Question

所以我的问题是，我有一个带有注册表单的index.php页面和一个切换按钮，该按钮对login.php中的内容发出ajax请求并更改表单，但随后我想返回到注册表单位于index.php...

index.php

<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>

登录.php

<?php
include("logic.php");
?>
<h1 id="message" class="contentHeader">Welcome<br>Please log in</h1>
<br>
<form id="form" method="post" style="height:250px;" action="logic.php" ">
  <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>
</form>

js

function loadXMLDoc(docPath) {
var ajaxRequest;
try {
    ajaxRequest = new XMLHttpRequest();

} 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", docPath, true);
ajaxRequest.send();

if (docPath == "login.php") {
    //change button to display Sign up;
    var a = document.getElementById("log-in");
    a.innerHTML = "Sign up";


    //here I dont want to load the whole index.php page again I want to use AJAX
    a.onclick = function backToIndex() {
        window.location.href = "index.php";
        return false;
    }
}
return false;
}

Answer 1

index.php

<!-- ... -->

<!-- where the ajax response will be placed -->
<div id="content"></div>

<!-- toggles the state between 'login.php' and 'register.php' -->
<button id="button" onClick="change()">switch</button>

<!-- ... -->

<script src="script.js"></script>

singup.php

<!-- ... -->

<div id="signup-form">
   <form action="signup.php">
      signup form ... <button>Sign Up</button>
   </form>
</div>

<!-- ... -->

登录.php

<!-- ... -->

<div id="login-form">
   <form action="login.php">
      login form ... <button>Log In</button>
   </form>
</div>

<!-- ... -->

脚本.js

var state = '';

// change the state on initialization
change();

function change()
{
   var xhr;

   // toggle state between 'login.php' and 'signup.php'
   state = state === 'login.php' ? 'signup.php' : 'login.php';

   try {
      xhr = new XMLHttpRequest();
   } catch (e) {
      console.log('error');
      return false;
   }

   var content = document.getElementById("content");
   var button = document.getElementById("button");

   xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
         content.innerHTML = xhr.responseText;

         // toggle button lable between 'Register' and 'Log In' based on state
         button.innerHTML = state === 'login.php' ? 'Register' : 'Log In';
      }
   };

   xhr.open('GET', state, true);
   xhr.send();
}