Question

JavaScript / Ajax学习者在这里！

当我单击导航栏中的菜单项时，我正在尝试使用Ajax在div中加载页面。我遇到几个问题：

例如，当我在导航栏中单击项目“过去”时，在控制台中得到以下错误消息，该错误消息指向我要加载的页面：“ XML解析错误：标记不匹配。预期： ”。除了关闭的head标签外，我在“过去”页面上看不到任何东西，因此我认为我的Ajax代码中存在问题。
页面仍会加载，但是导航栏的显示会完全更改（无论出于何种原因）。

关于问题1，我班上的某人建议这可能与确定的“响应”类型有关。但是我没有发现任何有效的方法。

欢迎您提供任何有关我必须查找的内容的帮助。您不必解决我的破解代码。：-）

谢谢！

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">EMILIE 1, 2, 3!</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a id="past" href="#" onclick="display1()">Past</a></li>
      <li class="active"><a id="present" href="#" onclick="display2()">Present</a></li>
      <li class="active"><a id="future" href="#" onclick="display3()">Future</a></li>
    </ul>
  </div>
</nav>

<div id="container-fluid"></div>

<script>

// Past
function display1() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("container-fluid").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "past.html", true);
  xhttp.send();
}

</script>

</body>

Answer 1

如果您尝试在本地获取html文件，则需要为浏览器设置安全性以启用CORS。

Disable same origin policy in Chrome

您应该使用Web服务器打开文件。我托管您的代码以免费托管。有效

https://viethien.000webhostapp.com/xmlget.html

Ajax问题：控制台显示“ Expected：”

1 个答案: