如何使用 AJAX 更改全部内容答案

【问题标题】：How to change full content using AJAX如何使用 AJAX 更改全部内容
【发布时间】：2021-02-11 13:16:06
【问题描述】：

当我按下按钮从 Words.html 到 SelectNumber.html 时，我希望整个页面内容发生变化

这是 Words.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Number Game</title>
  <link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
  <div id = "firstScreen">

    <h1 id ="Title" class = "title">
      The<br>Number Game
    </h1>

    <input type = "image" src = "button.png" class = "button1" onclick = "loadScreen">
    <h3 class = "start">START</h3>
  </div>
</body>
<script src = "Main.js"> </script>
</html>

这是JS

function loadScreen()
{
  var load = new XMLHttpRequest();
  load.onreadystatechange = function()
  {
      document.getElementById("firstScreen").innerHTML = this.responseText;
    }
  };
  load.open("GET", "SelectNumber.html", true);
  load.send();
}
function myFunction(load)
{
  document.getElementById("firstScreen").innerHTML = load.responseText;
}

这是 SelectNumber.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Number Game</title>
  <link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>

  <div id="Screen2">
    <p> Hello World</p>
  </div>

  <script src = "Main.js"></script>
</body>
</html>

当我按下输入按钮时，我希望整个内容从 Words.html 更改为 NumberSelect.html。

【问题讨论】：

在你的本地主机服务器 wamp/xampp 上创建，然后 load.open("GET", "localhost/selectNumber.html", true);

标签： javascript html jquery css ajax

【解决方案1】：

function loadScreen() {
  var load = new XMLHttpRequest();
  load.onreadystatechange = function() {
    document.getElementById("firstScreen").innerHTML = this.responseText;
  }

  load.open("GET", "select.html", true);
  load.send();
}

function myFunction(load) {
  document.getElementById("firstScreen").innerHTML = this.responseText;
}
loadScreen();

【讨论】：

// 这是正确的代码 // 你做了一些类型和结束标签错误 // 你也没有声明“loadscreen()” 这是有效的解决方案 - soyebahmed.com/staging/test/select.html
我认为 loadScreen();让事情出错。它使 Words.html 上的内容消失（我的意思是什么都不显示）。