Question

我正在尝试创建一个分析来自名为Overwatch的游戏数据的网站。

我有这个（https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/），当你访问它时，你看到的只是json格式的文本。

我是否可以使用JavaScript阅读此内容并将其发送到我网站上的<p>标记？

当前代码：

<script>
var obj = JSON.parse('https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/');
document.getElementById("elims").innerHTML = obj.Eliminations;
</script>
<p id="elims"></p>

Answer 1

你没有用jQuery标记这个，所以我假设你想要用vanilla JS做这件事。 .jsonParse()实际上并未从URL请求JSON - 它将现有的JSON数据解析为对象。

要处理此问题，您首先要申请数据。这可以使用XMLHttpRequest()：

来完成

var requestUrl = "https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/";

接下来，您需要构建并执行您的请求。一旦JSON数据完全加载（function）：

，创建onload

let request = new XMLHttpRequest();
request.open('GET', requestUrl);
request.responseType = 'json';
request.send();
request.onload = function() {
    logData(request.response);
}

处理数据的示例函数可以是：

function logData(data) { 
    document.querySelector('.elims').innerText = `Genji Eliinations: ${data['Genji']["Combat"]["Eliminations"]}`;
}

这会将其附加到具有类.elims的元素，例如

标记：

<p class="elims"></p>

我已在下面添加了整个代码。这应该足以让你朝着正确的方向前进：

＆＃13;

let requestUrl = "https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/";
let request = new XMLHttpRequest();
request.open('GET', requestUrl);
request.responseType = 'json';
request.send();
request.onload = function() {
	logData(request.response);
}

function logData(data) { 
	document.querySelector('.elims').innerText = `Genji Eliinations: ${data['Genji']["Combat"]["Eliminations"]}`;
}

＆＃13;

<p class="elims">

</p>

＆＃13;

Answer 2

良好的启动方式，因此您尝试访问的URL是REST Web服务，它只是一个生成JSON的GET方法。您所要做的就是通过Javascript或Jquery进行AJAX调用，然后您可以将其解析为Javascript变量，然后您可以使用这些变量值，您可以在HTML页面中生成Paragraph元素。

Answer 3

您需要使用HTTP GET请求从服务器加载数据，

$.get( "https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/", function( data ) {
  console.log(data);
  //process your data here
});

Answer 4

由于您的网址（https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/）是json格式。为了检索它，你需要使用类似getJson的东西。

示例：

$.getJSON( "https://enhanced-ow-api.herokuapp.com/ShalevBito-2753/competetive/pc/us/", function( json ) { console.log( "JSON Data: " + json.Assists["Healing Done"]); });

您可以详细了解如何使用getJson。

从URL读取JSON格式

4 个答案: