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

Question

我今天一直在练习我的 Vanilla Js/jQuery 技能，方法是使用 news-api 组合一个新闻源应用程序。 .

我已经包含了我的代码的 jsfiddle 链接 here 。不过，我已经删除了我的 API key 。

首次加载页面时，当用户单击媒体导出的图像时，例如“techcrunch”，使用 addEventListener，我将图像的 id 属性 传递到 API 端点 'https://newsapi. org/v1/articles' 并运行 GET 请求，然后继续创建包含新闻文章内容的 div 元素。

但是，单击 1 个图像后，我无法重新加载内容，除非我手动或使用 location.reload() 重新加载整个页面。

单击另一个图像时，新的 GET 请求正在运行并返回结果，因为我正在控制台记录结果。

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

任何帮助将不胜感激。

非常感谢您抽出时间。

API约定:

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

事件监听器:

sourceIMG.addEventListener('click', function() {
    $.get('https://newsapi.org/v1/articles?source=' + this.id + '&sortBy=latest&apiKey=APIKEYHERE', function(data, status) {
        console.log(data);
        latestArticles = data.articles;
        for (i = 0; i < latestArticles.length; i++) {
            //New Article
            var newArticle = document.createElement("DIV");
            newArticle.id = "article";
            newArticle.className += "article";
            //Title
            //Create an h1 Element
            var header = document.createElement("H1");
            //Create the text entry for the H1
            var title = document.createTextNode(latestArticles[i].title);
            //Append the text to the h1 Element
            header.appendChild(title);
            //Append the h1 element to the Div 'article'
            newArticle.appendChild(header);
            //Author
            var para = document.createElement("P");
            var author = document.createTextNode(latestArticles[i].author);
            para.appendChild(author);
            newArticle.appendChild(para);
            //Description
            var description = document.createElement("H4");
            var desc = document.createTextNode(latestArticles[i].description);
            description.appendChild(desc);
            newArticle.appendChild(description);
            //Image
            var image = document.createElement("IMG");
            image.src = latestArticles[i].urlToImage;
            image.className += "articleImg";
            newArticle.appendChild(image);
            //Url link
            //Create a href element
            var a = document.createElement('a');
            var link = document.createElement('p');
            var innerLink = document.createTextNode('Read the full story ');
            link.appendChild(innerLink);
            a.setAttribute("href", latestArticles[i].url);
            a.innerHTML = "here.";
            link.appendChild(a);
            newArticle.appendChild(link);
            //Append the Div 'article' to the outer div 'articles'
            document.getElementById("articles").appendChild(newArticle);
        }
    });
}, false);

Answer 1

我使用 API key 尝试了你的 fiddle 。它对我有用，因为内容新内容被附加到 #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