[英]Show default result once the page is loaded after importing Json data with JS
我一直在尝试从这里https://jsonplaceholder.typicode.com/posts/1导入Json数据到我的网站。
我只是设法做到这一点,但现在我想创建连接到不同帖子的不同按钮,因此:
等等。 我要做的是,我复制了用于第一个函数的函数,并通过更改函数名称重用了该函数。 我不知道这是一个好主意还是有更好的方法来做到这一点,并且避免在每次必须添加帖子时都复制该函数。
目前似乎可以正常工作,但是每次我加载页面时,都会收到一个随机帖子。 我想显示第一个( https://jsonplaceholder.typicode.com/posts/1 )并显示其他(仅当我单击按钮(数字)时),有没有办法做到这一点?
这是我的代码:
的HTML
<div class="news-wrap margin-top-div">
<div class="news-btn-container-flex">
<div class="news-btn-div current" data-tab="1" onclick="req1()">1</div>
<div class="news-btn-div" data-tab="2" onclick="req2()">2</div>
<div class="news-btn-div" data-tab="3" onclick="req3()">3</div>
<div class="news-btn-div" data-tab="4" onclick="req4()">4</div>
<div class="news-btn-div" data-tab="5" onclick="req5()">5</div>
</div>
<div class="news-content-container-flex">
<div class="news-title">
<span id="newsTitle">
</span>
</div>
<div class="news-content-1">
<span id="newsContent">
</span>
</div>
<div class="news-content-2">
<span>
</span>
</div>
</div>
</div>
JS
function req1() {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => {
const title = json.title;
const body = json.body;
document.getElementById("newsTitle").innerHTML = title;
document.getElementById("newsContent").innerHTML = body;
});
}
req1();
function req2() {
fetch('https://jsonplaceholder.typicode.com/posts/2')
.then(response => response.json())
.then(json => {
const title = json.title;
const body = json.body;
document.getElementById("newsTitle").innerHTML = title;
document.getElementById("newsContent").innerHTML = body;
});
}
req2();
function req3() {
fetch('https://jsonplaceholder.typicode.com/posts/3')
.then(response => response.json())
.then(json => {
const title = json.title;
const body = json.body;
document.getElementById("newsTitle").innerHTML = title;
document.getElementById("newsContent").innerHTML = body;
});
}
req3();
function req4() {
fetch('https://jsonplaceholder.typicode.com/posts/4')
.then(response => response.json())
.then(json => {
const title = json.title;
const body = json.body;
document.getElementById("newsTitle").innerHTML = title;
document.getElementById("newsContent").innerHTML = body;
});
}
req4();
function req5() {
fetch('https://jsonplaceholder.typicode.com/posts/5')
.then(response => response.json())
.then(json => {
const title = json.title;
const body = json.body;
document.getElementById("newsTitle").innerHTML = title;
document.getElementById("newsContent").innerHTML = body;
});
}
req5();
这是我的JSfiddle,页面加载时随机显示帖子
首先使您的req
功能独特
function req(input) {
fetch('https://jsonplaceholder.typicode.com/posts/' + input)
.then(response => response.json())
.then(json => {
return json;
});
}
然后,您必须使用promise
。 在此处阅读有关Promise的更多信息
Promise.all([req(1), req(2), req(3)])
.then(function(res) {
// all data here
}, function(err) {
// one or more failed
});
并为每个帖子放置不同的元素和标签,或者使它们动态化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.