javascript - 我的 jquery 代码无法使用 ajax 更改页面

Question

我用 ajax 输入了我的第一个代码，但它没有。请帮助。当我点击菜单按钮时，它必须更改 menu.txt 内部的部分内容。但是它不起作用。

这是我的html代码:

<li id="navMenuButton">
              <a  href="#" onclick="$menu.txt.loadDoc();">
                <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<section id="homepage">
    <div id="main-content" class="container">  
      <div class="jumbotron">
      </div>
      <div class="row">
.
.
.

这是我的js代码:

$(document).ready(function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("#homepage").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "menu.txt", true);
  xhttp.send();
});

Answer 1

.ready() handler 需要一个函数来执行 once DOM 被加载。它必须是匿名函数语句或对已声明的命名函数的引用。

关于 ajax 请求...由于您使用 jQuery，我建议您尝试使用 jQuery $.ajax()方法。

$(document).ready(function(){ // An anonymous function to pass to the ready handler

  // A named function for the ajax request
  function loadDoc(e){
    e.preventDefault()  // to prevent the normal behavior of the anchor
  
    $.ajax({
      url: "menu.txt",  // make sure the path and filename is correct
      method: "get",  // can be omited because it is the default
      dataType: "html",
      success: function(response){
        $("#homepage").html(response) // the text response passed to the .html() method
      },
      error: function(request, status, error){
        console.log("Status",status,"\nERROR",error)  // If there is an error
      }
    })
  }
  
  // Click handler for the anchor child of #navMenuButton
  $("#navMenuButton a").click(loadDoc)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="navMenuButton">
  <a href="#">
    <span class="glyphicon glyphicon-cutlery"></span>
    <br class="hidden-xs"> Menu</a>
</li>
<section id="homepage"></section>

演示显然不会在这里工作，因为“menu.txt”文件不存在并且因为 SO 片段是 bloquing 请求。但是你可以看到错误回调被触发了。