Question

我开始学习AJAX并且在开始时遇到问题我无法解决。我有2个文件，main.html代码：

<!DOCTYPE html>
<html>
<head>
    <title>My page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <button>apple</button>
    <div id="target">
    Press button
    </div>

    <script>
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++)
    {
        buttons[i].onclick = handleButtonPress;
    }

    function handleButtonPress(e)
    {

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET","blabla.txt",false);
        xmlhttp.send(null);

        document.getElementById("target").innerHTML=xmlhttp.responseText;

    }
</script>
</body>
</html>

和＆＃34; blabla.txt＆＃34;内容：

asdasdsaldkjasdajsdl

问题是单击按钮后它应该将blabla.txt文件的内容加载到div元素中。不幸的是，它无法解决我不知道的原因。

我认为值得补充说两个文件都放在同一个文件夹中。

Answer 1

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

Answer 2

<div id="test"></div>

$(document).ready(function(){
   $.get('ajax/test.txt', function(data) {
      $('#test').html(data);
    });

})

Answer 3

 var xmlhttp = new XMLHttpRequest();

 xmlhttp.onreadystatechange = function () {
     var DONE = (xmlhttp.readyState == 4 && xmlhttp.status==200) ;
     if (DONE){
         document.getElementById("target").innerHTML=xmlhttp.responseText;
     }
 };
 xmlhttp.open("GET","blabla.txt",false);
 xmlhttp.send(null);

使用上面的代码。您需要添加ajax的状态以检查ajax是否已完成。否则它将执行相同的时间，并且不会找到响应文本。

Ajax不加载简单文件

3 个答案: