gpt4 book ai didi

javascript - 将 JSON(来自 URL)特定信息显示为 HTML

转载 作者:行者123 更新时间:2023-11-30 11:20:47 27 4
gpt4 key购买 nike

我需要显示我在 SourceForge 上托管的工具的总下载量。

他们有一个 API 可以返回 JSON 格式的数据。但是返回的数据有很多信息,我只需要其中的1个。

这是 SourceForge API 的 URL,显示数据:
https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19

我能够在本地文件上执行此操作,但我无法通过外部源使其工作。

我的 HTML 文件代码:

<html>
<title>Total Downloads</title>
<body>
<div id="container">
<div id="output">NO DATA</div>
</div>
<script src="totdwn.js"></script>
</body>
</html>

我的totdwn.js文件代码:

var jcontent = {
"total": 123456789
}
var output = document.getElementById('output');
output.innerHTML = jcontent.total;

这很好用,但数据必须手动插入到 JS 文件中。我想从 URL 中获取数据。 total 信息在 URL 上是相同的,但如何将它加载到 jcontent 变量中?

最佳答案

您需要使用 Ajax 向该 URL 发出请求并检索返回的 JSON 数据。您可以使用 vanilla JavaScript 来做到这一点,或者使用 jQuery 会更容易一些:

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

$.ajax({
method: "GET",
cache: false,
url: url,
success: function(data) {
document.getElementById('output').innerHTML = data.total;
},
error: function(error) {
//What do you want to do with the error?
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
<div id="output">NO DATA</div>
</div>

如果你想用 vanilla JavaScript 来做,这里有一个例子:

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
document.getElementById('output').innerHTML = JSON.parse(xmlHttp.responseText).total;
}
xmlHttp.open("GET", url, true);
xmlHttp.send();
<div id="container">
<div id="output">NO DATA</div>
</div>

关于javascript - 将 JSON(来自 URL)特定信息显示为 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49925355/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com