无法在 Ajax 请求上加载新的 HTML 内容 [关闭]答案

【问题标题】：Unable to load new HTML content on Ajax request [closed]无法在 Ajax 请求上加载新的 HTML 内容 [关闭]
【发布时间】：2015-11-27 15:30:08
【问题描述】：

我对整个“后端”开发还很陌生。我设置了一个本地主机写了我的 html 请求，没有可见的语法错误，但我的新内容仍然不会更新页面。

<!DOCTYPE html>
<html>
<head>
    <title>Loading Html With AJAX</title>
</head>
<body>
<header><h1>Maker Bus</h1></header>
<section id="content"></section>
<script type="text/javascript" src="/Applications/MAMP/htdocs/loadingHtml.js"></script>
</body>
</html>




var xhr= new XMLHttpRequest();

xhr.onload=function(){
    //Server Check
    if(xhr.status==200){
        document.getElementById('content').innerHTML=xhr.responseText;

    }
};

xhr.open('GET' ,'http://localhost:8888/data.html',true);
xhr.send(null);

【问题讨论】：

确保您的 javascript 在脚本标签中？并尝试将 url 更改为相对 url 作为 'data.html'
您的代码 (var xhr...) 是否应该在正文中的 <script> 标签内？

标签： javascript html ajax localhost

【解决方案1】：

这个 ajax 请求中缺少很多东西...包括您正在使用浏览器可能支持的 onload 功能。看看这个link

1.您没有像 IE 那样制作独立于浏览器的 XMLHttpRequest，我们需要一个 ActiveXObject ...

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.您应该使用 onreadystatechange 函数（当响应准备好时调用该函数）您使用的不会起作用，因为那时响应不会准备好。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

3.获取响应的调用url

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

For the full example read here

【讨论】：

此链接：stackoverflow.com/questions/10642289/…
OP 使用xhr.onload，当readyState == 4 在xhr2 中时触发
是的，但正如我所说，在更新后的答案中，他的浏览器可能不支持它，所以我在那里建立了一个链接让他通过它。 @凯多
虽然这是个好建议，但 OP 不太可能使用 IE9 或 OperaMini 进行测试，但问题来自其他地方。
我读到 onload 被火狐阻止，因为它需要 XmlHttpRequest 2

【解决方案2】：

只需在您的 javacript 文件中键入此函数，相信它会为您工作。

function getContent(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var content = document.getElementById("content");
content.value  = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "data.html", true);
xmlhttp.send();
}

//ON YOUR BODY TAGS IN HTML PAGE 
<body onload="getContent()"></body>

相信我，这绝对行得通，我整个星期都处于同样的情况；成功请标记。

【讨论】：

您也没有将其插入脚本标签中...