Question

我使用新闻API通过json格式获取新闻内容。我有html＆＃39;输入元素＆＃39;哪个用户可以选择多个来源。我想要的是如果来源等于＆＃34;用户选择的来源或定义＆＃34;然后新闻内容将根据用户选择而改变。

正如你所看到的，我不使用jQuery，我现在需要比jQuery更适合使用JS。所以我更喜欢使用纯JS。

这是我的代码。这是在没有用户选择功能的情况下工作的。

HTML：

<!--dropDown Category-->
<div class="form-group" id="categorySelector">
      <label for="newsCat">Select source:</label>
           <select class="form-control" id="newsCat">                              
                <option value="the-next-web">the-next-web</option>
                 <option value="wired-de">wired-de</option>
                 <option value="time">time</option>
            </select>
</div>

JS代码：

   var newsRequest,
    newsKey = 'XXXXXXXXXXXXXXXXXXX',
    newsSource = 'the-next-web'; //defaultSource
//for older broswser
if (window.XMLHttpRequest) {
    newsRequest = new XMLHttpRequest();
} else {
    newsRequest = new ActiveXObject("Microsoft.XMLHTTP");
} //window.XMLHttpRequest    

newsRequest.open("GET", 'https://newsapi.org/v1/articles?source=' + newsSource + '&sortBy=latest&apiKey=' + newsKey);
newsRequest.onreadystatechange = function () {
    if ((newsRequest.readyState === 4) && (newsRequest.status === 200)) {
        var infoNews = JSON.parse(newsRequest.responseText);
        // Action to be performed when the document is read;

        var newsHtml = '<ul class="list-group">';
        for (var i = 0; i < infoNews.articles.length; i++) {
            newsHtml += '<li>';
            newsHtml += '<div class="newItem">' + '<a href="' + infoNews.articles[i].url + '" target="_blank">' + '<img src = "' + infoNews.articles[i].urlToImage + '"  alt="' + infoNews.articles[i].title + '" title="' + infoNews.articles[i].title + '">' + '</a>';
            newsHtml += '<h3 class="newsTitle">' + infoNews.articles[i].title + '</h3>';
            newsHtml += '<p class="newsDes">' + infoNews.articles[i].description + '</p>';
            newsHtml += '<p class="newsAuthor">' + infoNews.articles[i].author + '</p>';
            newsHtml += '</div>';
            newsHtml += '</li>';
        } //for loops json
        newsHtml += '</ul>';
        document.querySelector('.newsParent').innerHTML = newsHtml;


    } //newsRequest.readyState
} //newsRequest.readyState
//xmlhtpprequest method open                   
newsRequest.send();

//我想出了这段代码.. document.querySelector（＆＃39; #newsCat＆＃39;）。onchange = function（selectedSource）{ newsSource = selectedSource.value; //由于这在函数内部仍然不好 }

Answer 1

以下是onchange元素发送的select回调示例。首先，我们要将onchange事件与某个方法相关联，因此我们将onchange="selectionChanged()"属性添加到<select>标记。

在方法selectionChange中，我们将处理更改：获取newsCat元素，如果它不为null（可以是，在加载窗口之前），我们得到它的值。最后，我们将此值传递给实际使用此值的getNewsFromApi方法，以构建api url并从外部源获取数据。

var newsKey = 'XXXXXXXXXXXXXXXXXXX';

function selectionChanged() {
  var categorySelect = document.getElementById('newsCat');
  var selectedCategory = categorySelect !== null ? categorySelect.value : 'the-next-web';
    
  getNewsFromApi(selectedCategory);
}
  
function getNewsFromApi(newsSource) {
  var apiUrl = 'https://newsapi.org/v1/articles?source=' + newsSource + '&sortBy=latest&apiKey=' + newsKey;
  
  // here goes your API call
  
  console.log('getting news from: ' + apiUrl);
}

getNewsFromApi('the-next-web');

    <div class="form-group" id="categorySelector">
      <label for="newsCat">Select source:</label>
      <select class="form-control" id="newsCat" onchange="selectionChanged()">                              
        <option value="the-next-web">the-next-web</option>
        <option value="wired-de">wired-de</option>
        <option value="time">time</option>
      </select>
    </div>

XMLhttprequest的动态URL

1 个答案: