Question

我今天通过使用news-api将新闻源应用程序放在一起，练习我的Vanilla Js / jQuery技能。

我已经添加了一个指向我的代码here的jsfiddle的链接。但是，我已删除了API密钥。

首次加载页面时，当用户点击媒体插座的图像时，例如'techcrunch'，使用addEventListener，我将图片的id attribute传递给API终点'https://newsapi.org/v1/articles'并运行GET请求，然后继续创建{ {1}}包含新闻文章内容的元素。

但是，点击1张图片后，除非我手动或使用div重新加载整个页面，否则无法重新加载内容。

点击另一张图片时，新的location.reload()请求正在正在运行并返回结果，因为我正在控制台记录结果。

我正在寻找有关如何使用每个新GET请求重新加载页面内容的一般性指导。

非常感谢任何帮助。

非常感谢你的时间。

Api惯例：

例如GET

事件监听：

https://newsapi.org/v1/articles?source=techcrunch&apiKey=APIKEYHERE

Answer 1

我用api键试了一下你的小提琴。它对我有用，因为内容新内容被附加到#articles div中的先前内容。如果我理解你的问题，当点击新闻服务图片时，你只想显示该新闻服务的文章。为此，您需要在添加新内容之前清除#articles的内容。

要使用普通js，您可以使用以上for循环：

   // Removing all children from an element
   var articlesDiv = document.getElementById("articles");
   while (articlesDiv.firstChild) {
     articlesDiv.removeChild(articlesDiv.firstChild);
   }

   for (i = 0; i < latestArticles.length; i++) {...

完全披露，我添加了变量名称'articlesDiv'，但上面的代码片段来自https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

使用每个新的GET请求刷新html内容

1 个答案: