Question

我是初学者。我正在处理的问题可能很容易解决;）我正在一个网页上，文本内容从外部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 =＆＃34; page＆＃34;）

请有人帮助我。

提前致谢。

Answer 1

尝试将POST更改为GET并查看是否有效。

Answer 2

对于这种情况，我建议用户使用jQuery Load函数。它易于使用，符合您的需求。您可以在以下链接中找到更多信息：http://api.jquery.com/load/

Answer 3

很难知道你是不是告诉我们发生了什么。我弄明白了（也许）一个问题

尝试将代码更改为

function getdata(){

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


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

Answer 4

您是否尝试过使用var _xhr;在函数内部？

我尝试了以下..它的工作

function getdata(){
                var xmlhttp;
                xmlhttp=new XMLHttpRequest();
                xmlhttp.open("get","techers.html",false);
                xmlhttp.send();
                document.getElementById("page").innerHTML=xmlhttp.responseText;

            }

Answer 5

如何使用ajax调用？

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

文档：http://api.jquery.com/jquery.get/

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

5 个答案: