无法在Ajax请求中加载新的HTML内容

Unable to load new HTML content on Ajax request

本文关键字：HTML 内容 加载 Ajax 请求      更新时间：2023-09-26

我对整个"后端"开发相当陌生。我设置了一个本地主机写我的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);

这个ajax请求中缺少很多东西…包括您正在使用的onload功能，这可能是由您的浏览器支持。看这个链接

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();

完整的例子请看这里

只要在你的javascript文件中输入这个函数，我相信它会为你工作。

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>

这绝对有效，相信我，我整个星期都在同样的情况下;

相关文章：