如何将数据传递到Vanilla JS中的新闻API的细节页面?

发布于 2025-01-25 15:24:25 字数 1026 浏览 1 评论 0原文

我正在从香草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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

咽泪装欢 2025-02-01 15:24:25

您可以将相关信息传递给 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 via new 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.)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文