Javascript 如何使用AJAX更改完整内容_Javascript_Html_Jquery_Css_Ajax

Javascript 如何使用AJAX更改完整内容

javascript html jquery css ajax

Javascript 如何使用AJAX更改完整内容,javascript,html,jquery,css,ajax,Javascript,Html,Jquery,Css,Ajax,我希望当我按下从Words.html到SelectNumber.html的按钮时，整个页面的内容都会发生变化 <html> <head> <meta charset="UTF-8"> <title>Number Game</title> <link rel = "stylesheet" href = "stylesheet.css"> </head

我希望当我按下从Words.html到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

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

这是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。

函数加载屏幕（）{
var load=new XMLHttpRequest（）；
load.onreadystatechange=函数（）{
document.getElementById（“firstScreen”）.innerHTML=this.responseText；
}
load.open（“GET”、“select.html”、true）；
load.send（）；
}
函数myFunction（加载）{
document.getElementById（“firstScreen”）.innerHTML=this.responseText；
}
加载屏幕（）//这是正确的代码//您犯了一些类型和结束标记错误//而且您没有声明“loadscreen（）”这是有效的解决方案-我认为loadscreen（）；使事情出错。它使Words.html上的内容消失（我的意思是什么也不显示）；