从 url 获取 JSON 并打印到页面上答案

【问题标题】：Fetch JSON from a url and print onto page从 url 获取 JSON 并打印到页面上
【发布时间】：2019-12-08 06:03:32
【问题描述】：

我正在尝试从 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>

【问题讨论】：

标签： javascript json rest dom

【解决方案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();

【讨论】：

另外，请确保在从另一个域请求时允许跨源资源共享 (CORS)。
谢谢 Ali，虽然这确实修复了第一个控制台错误，但它不会将 JSON 信息打印到页面上。
我认为您需要将 textContent 更改为 innerText ，查看编辑

【解决方案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;

【讨论】：