如何将数据传递到Vanilla JS中的新闻API的细节页面?
我正在从香草JS的新闻API获取JSON数据。我为获取的信息创建了预告片。当我单击其中一个预告片时,我需要传递ID并根据ID进行某些内容,以将其发送到另一个“详细页面”。 接收数据看起来像:
[{"id":6657824,"title":"Britische Medienaufsicht: 16 Prozent der britischen Kleinkinder schon auf Tiktok","synopsis":"Eine Studie der britischen Medienaufsichtsbehörde Ofcom zeigt, dass 16 Prozent der 4- bis 5-Jährigen bereits Videos der Kurzvideoplattform Tiktok ansehen.","meta":{"pubDate":"2022-03-30T17:36:00+02:00"},"image":{"src":"https://heise.cloudimg.io/v7/_www-heise-de_/imgs/18/3/4/4/4/7/9/9/shutterstock_576828061.jpg-4a293722ddae462b.jpeg?org_if_sml=1&q=70&width=3800","width":"3800","height":"2135","alt":"Kind schaut im Dunkeln auf ein beleuchtetes Display"}}]
生成我的预告片 +阅读更多按钮的JS代码如下:
const detail = document.createElement('a');
const linkText = document.createTextNode("Mehr erfahren");
detail.appendChild(linkText);
detail.href = loadNews();
detail.target="_blank";
newNews.appendChild(detail)
I'm fetching json data from a news api in vanilla JS. I created teasers for the fetched informations. When I click on one of the teasers I need to pass a ID and based on the ID some content to another "detail page".
The receiving data looks like this:
[{"id":6657824,"title":"Britische Medienaufsicht: 16 Prozent der britischen Kleinkinder schon auf Tiktok","synopsis":"Eine Studie der britischen Medienaufsichtsbehörde Ofcom zeigt, dass 16 Prozent der 4- bis 5-Jährigen bereits Videos der Kurzvideoplattform Tiktok ansehen.","meta":{"pubDate":"2022-03-30T17:36:00+02:00"},"image":{"src":"https://heise.cloudimg.io/v7/_www-heise-de_/imgs/18/3/4/4/4/7/9/9/shutterstock_576828061.jpg-4a293722ddae462b.jpeg?org_if_sml=1&q=70&width=3800","width":"3800","height":"2135","alt":"Kind schaut im Dunkeln auf ein beleuchtetes Display"}}]
The JS-Code that generates my teaser + read more button looks like this:
const detail = document.createElement('a');
const linkText = document.createTextNode("Mehr erfahren");
detail.appendChild(linkText);
detail.href = loadNews();
detail.target="_blank";
newNews.appendChild(detail)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以将相关信息传递给 QUERY参数 eg
href =“ link/to/deled-page.html?id = 6657824”
。并通过新的urlsearchParams(location.search).get(“ id”)
在下一页上读取它。还可以将整个预告仪响应存储在
indexeddb
/localstorage
如果要在下一页上检索而不再次获取它们(例如,何时服务器无法发送nthe正确的缓存标题。)You can pass the relevant information as query params e.g.
href = "link/to/detail-page.html?id=6657824"
. and read it on the next page vianew URLSearchParams(location.search).get("id")
.Also possible to store the whole teasers response in
indexedDB
/localStorage
if you want to retrieve it on the next page without fetching them again (e.g. when the server can't send the correct cache headers.)