Ajax问题：控制台说“预期：”

问题描述 投票：0回答：1

Javascript / Ajax学习者在这里！

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

  1. 例如，当我单击导航栏中的“过去”项时，我在控制台中收到以下错误消息，指向我正在尝试加载的页面：“XML解析错误：标记不匹配。预期：”。除了关闭头标记之外，我在“过去”页面中看不到任何内容，因此我认为我的Ajax代码存在问题。
  2. 无论如何页面加载，但导航栏的显示完全改变（无论出于何种原因）。

关于问题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>
javascript html ajax
1个回答
0
投票

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

Disable same origin policy in Chrome

您应该使用Web服务器打开文件。我托管您的代码以在免费主机中进行采样。有效

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.