Question

我正在建立一个新闻聚合器项目，并且遇到一个重大问题，即向api调用多个请求。该api有几种不同的类别可供选择，例如商业，体育，技术等。例如，我的目标是能够单击指向该商业页面（在我的网站上）的链接，并进行新的调用在api中显示来自业务类别的故事。然后，可以单击返回首页并显示热门新闻等等。我已经在这个问题上困扰了好几天，并且只取得了一点进展。

相关的HTML

<ul class="nav-list" id="nav-list">
            <li class="home list"><a href="index.html">Home</a></li>
            <li class="business list"><a href="business.html" class="business">Business</a></li>
            <li class="entertainment list"><a href="entertainment.html">Entertainment</a></li>
            <li class="health list"><a href="health.html">Health</a></li>
            <li class="science list"><a href="science.html">Science</a></li>
            <li class="sports list"><a href="sports.html">Sports</a></li>
            <li class="technology list"><a href="technology">Technology</a></li>
          </ul>

JavaScript

const navList = document.getElementById('nav-list');

这是我包装请求的函数。我已经用各种方法测试了该函数是否带有参数，并且每次都以应有的方式工作，因此我不确定这是问题所在。 / p>

function newRequest(newCategory) {
  if (newCategory == null) {
    newCategory = '';
  }

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url + 'category=' + newCategory, true);
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
    for (var i = 0; i < 7; i++) {
      cardTitle[i].innerHTML = data.articles[i].title;
      cardSubTitle[i].innerHTML = data.articles[i].description;
      source[i].innerHTML = data.articles[i].source.name;
      if (data.articles[i].urlToImage != null) {
        image[i].src = data.articles[i].urlToImage;
      }else {
        image[i].src = 'no-image.jpg';
      }
    }
  };

  xhr.send();
}

这是我的事件侦听器，附加到无序列表。它的行为很有趣。我控制台上的所有内容均会打印到控制台上，但只会显示一秒钟，然后消失。

navList.addEventListener('click', function (e) {
  console.log(e.target.nodeName);
  if (e.target.className == 'business') {
    //e.stopPropagation();
    console.log('hello');
    //e.preventDefault();
    newRequest('business');
    //menu[0].classList.add('hide');
  }
}, true);

当我取消注释preventDefault()时，对api的调用实际上有效，并且显示来自业务类别的新闻。唯一的问题是该网站未链接到business.html页。它停留在index.html上并显示商业新闻。当我将preventDefault()注释掉时，我链接到business.html，但是对api的调用不起作用，并且它始终显示与首页上相同的新闻。

点击事件中的XMLHTTPRequest

0 个答案: