【JS】解析从API读取的json数据

当我第一次拿到API地址之后发现,这玩意怎么用呢?别急,我终于知道了。

代码部分

1
2
3
4
5
6
7
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(document).ready(
function () {
$.get("https://v1.jinrishici.com/siji", function (data) { $("# latest").text(data.content); });
});
</script>
<span id="latest"></span>

如果转化成最简单的“填空题”就会变成这样:

1
2
3
4
5
6
7
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(document).ready(
function () {
$.get("你的API地址", function (data) { $("# 不重复的SPAN的ID").text(data.要读取的项); });
});
</script>
<span id="不重复的SPAN的ID"></span>

简要分析

其实我也是初学者,所以就不多说了。浅学一下,这其实就是个简单的调用。
第一行是载入jQuery代码框架,就如C语言中自己找的第三方库。第二行这里的$(document).ready代表和图片等DOM元素一起载入,不需要等网站全部载入完毕。第四行代表执行get请求,这里的第二个参数是get成功后执行的命令,这里的function中扔进去了一个data,在函数里又被扔进了span里。最后一行,调用。

代码运行效果

下方置入了html代码,可以通过刷新页面看看api带来的信息的变动。


【JS】解析从API读取的json数据
https://www.yuanzj.top/posts/3e3450d6.html
作者
yzl3014
发布于
2022年7月15日
许可协议