Question

问题：为什么函数无法检索json对象？ 我也注意到在我的浏览器上调试代码时，控制台会通过代码传递代码，但永远不会回来！我认为这样做的方法是让html代码底部的函数循环回来，直到请求状态发生变化。

我开始学习html javascripting。在教程之后，我获得了以下用于获取和解析JSON对象的html页面的代码：

    <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
    function ajax_get_json(){
      //crate our XMLHttpRequestobject
      var hr = new XMLHttpRequest();
      //var p1 = "p1";
      //creat some variable we need to sned to our php file
      hr.open("GET", "mylist.Json", true);
      //set content type information for sending url encoded variables in the
      //reqeust
      console.log(5+6);
      hr.setRequestHeader("Content-type", "application/json", true);
      //Acess the onreadystatechange event for the XMLHttpRequest object
      hr.onreadystatchange = function(){
        if (hr.readyState == 4 && hr.status == 200){
          var data = JSON.parse(hr.responseText);
          var results = document.getElementsById("results");
          results.innerHTML=data.user;
        //  document.getElementById("results").innerHTML = return_data;
        }
      }
      //send the data to php now and wait for the response to update the
      //status div
      hr.send();
      results.innerHTML = "reqeusting...";
      // document.getElementById("results").innerHTML="processing...";
    }


    </script>
  </head>
<body>
  <div id="results"></div>
  <script type="text/javascript">ajax_get_json();</script>
</body>
</html>

这是json目标代码

{"user":"John", "age":22, "country":"United States" }

这两个文件都位于启用了LAMP的ubuntu服务器中。这是目录的样子：

Answer 1

显然问题在于在var results函数中声明hr.onreadystatechange。将声明移到顶部修复了代码。这是工作代码：

<!DOCTYPE html>
<html>
  <head>
    <script>
    function ajax_get_json(){
            var results = document.getElementById("results");
      //crate our XMLHttpRequestobject
      var hr = new XMLHttpRequest();
      //var p1 = "p1";
      //creat some variable we need to sned to our php file
      hr.open("GET", "mylist.json", true);
      //set content type information for sending url encoded variables in the
      //reqeust
      //console.log(5+6);
      //hr.setRequestHeader("Content-type", "application/json", true);
      hr.setRequestHeader("Content-type", "application/json", true);
      //Acess the onreadystatchange event for the XMLHttpRequest object
      hr.onreadystatechange = function(){
        if (hr.readyState == 4 && hr.status == 200){
          var data = JSON.parse(hr.responseText);
          results.innerHTML=data.user;
        //  document.getElementById("results").innerHTML = return_data;
        }
      }
      //send the data to php now and wait for the response to update the
      //status div
      hr.send(null);
      results.innerHTML = "reqeusting...";
      // document.getElementById("results").innerHTML="processing...";
    }


    </script>
  </head>
<body>
  <div id="results"></div>
  <script>ajax_get_json();</script>
</body>
</html>

AJAX使JSON函数不循环

1 个答案: