使用AJAX将html文件的内容加载到div中

时间:2014-10-23 01:12:38

标签: javascript html ajax load

我是初学者。我正在处理的问题可能很容易解决;)我正在一个网页上,文本内容从外部html文件加载到div。这是在用户单击菜单项时完成的。

这是我的代码html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="js/js.js"></script>

</head>
<body>
          <div>
                      <ul>      
                          <li><a id="teachers" href="#" name="teachers" onclick="getdata()">
                            Teachers
                          </li> 
                        </ul>
          </div>

          <div id="page"  name="" >
            bla bla bla ...
          </div>

</body>
</html>

这是我的代码ajax:

var _xhr;

function getdata(){

    _xhr= new XMLHttpRequest();
    _xhr.onreadystatechange=callback;
    _xhr.open("POST", "teachers.html", true);
    _xhr.send();

    function callback(){
        var _target = document.getElementById("page");
        _target.innerHTML=_xhr.responseText;
    }

}

当我点击链接(教师)时,我想将html文件(teachers.html)加载到div(id =“page”)

请有人帮助我。

提前致谢。

1 个答案:

答案 0 :(得分:0)

onreadystate多次触发。在阅读responseText

之前,您需要等待4的readystate
function callback(){
    if (_xhr.readyState===4) {
        var _target = document.getElementById("page");
        _target.innerHTML=_xhr.responseText;
    }
}

您可能还应检查状态。