從 url 獲取 JSON 並打印到頁面上

Question

我正在嘗試從 url 獲取 JSON 數據並顯示。 使用我下面的代碼，由於未捕獲的引用錯誤，它不會出現。 如何調整我的代碼以顯示數據。

 var url = "https://fantasy.premierleague.com/api/entry/1258872/"; req.open("GET", url); req.send(); req.addEventListener("load", function(){ if(req.status == 200 && req.readyState == 4){ var response = JSON.parse(req.responseText); document.getElementById("id").textContent = response.title; document.getElementById("player first name").textContent = response.player_first_name; document.getElementById("player last name").textContent = response.player_last_name; } })

 <h1>Fantasy Premier League</h1> <h2 id="id"></h2> <h3>First Name: <span id="player first name"></span></h3> <h3>Last Name: <span id="player last name"></span></h3>

Answer 1

你應該在調用open方法之前定義你的請求req對象

var req = new XMLHttpRequest();

在您的情況下req未定義並且在未定義的對象上調用方法將引發錯誤

您的代碼的更好版本將是

var url = "https://fantasy.premierleague.com/api/entry/1258872/";
var req = new XMLHttpRequest();

req.onreadystatechange =  function() {
    if(req.status == 200 && req.readyState == 4){
         var response = JSON.parse(req.responseText);
         document.getElementById("id").innerText = response.title;
         document.getElementById("player first name").innerText = response.player_first_name;
         document.getElementById("player last name").innerText = response.player_last_name;
  }
};

req.open("GET", url);
req.send();

Answer 2

您忘記聲明 XMLHttpRequest 對象。 無論如何購買，由於它的 cors 政策，它不會從 api 返回響應。

 var url = "https://fantasy.premierleague.com/api/entry/1258872/"; var req = new XMLHttpRequest(); req.open("GET", url); req.send(); req.addEventListener("load", function(){ if(req.status == 200 && req.readyState == 4){ var response = JSON.parse(req.responseText); document.getElementById("id").textContent = response.title; document.getElementById("player first name").textContent = response.player_first_name; document.getElementById("player last name").textContent = response.player_last_name; } })

 <h1>Fantasy Premier League</h1> <h2 id="id"></h2> <h3>First Name: <span id="player first name"></span></h3> <h3>Last Name: <span id="player last name"></span></h3>

您可以使用服務器端作為中介來發出請求，這樣您就可以繞過 cors 策略並訪問數據。 php中的例子：

$contents = 
file_get_contents("https://fantasy.premierleague.com/api/entry/1258872/");
echo $contents;