Question

我正在尝试从API中提取数据并在HTML页面中显示获取的数据。我的问题是我实际上无法访问API数据，因为状态为0且statusText为空。我用XAMPP运行我的页面。

var xmlhttp = new XMLHttpRequest();
var url = "http://swapi.co/api/people/1";
xmlhttp.open("GET", url, true)
xmlhttp.send()


xmlhttp.onreadystatechange=function(response) {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}

console.log(xmlhttp.status)
console.log(xmlhttp.statusText)

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].name +
        "</td><td>" +
        arr[i].films +
        "</td><td>" +
        arr[i].gender +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
   
  <title>swapi</title>
</head>
<body>
   <div id="id01"></div>
</body>
 </html>

Answer 1

问题可能是您只在发送请求后才附加处理程序。尝试：

var xmlhttp = new XMLHttpRequest();
var url = "http://swapi.co/api/people/1";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(response) {
  console.log(xmlhttp.status);
  console.log(xmlhttp.statusText);
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
  }
};
xmlhttp.send();

由于您在jQuery中使用骨干，因此可以使用$.get()：

$.get("http://swapi.co/api/people/1").done(myFunction);

请注意，textStatus将是传递给myFunction的第二个参数。如果这是您可以做的事情：

$.get("http://swapi.co/api/people/1").done(function(data,textStatus){
  myFunction(textStatus);
});

无法通过JavaScript从localhost调用API

1 个答案: