XMLhttprequest의 동적 URL

Question

뉴스 API를 사용하여 json 형식으로 뉴스 콘텐츠를 가져 왔습니다. 사용자가 여러 소스를 선택할 수있는 html 'input 요소'가 있습니다. 소스가 "사용자가 선택한 소스 또는 정의"와 같으면 뉴스 내용이 사용자 선택에 따라 변경됩니다.

jQuery를 사용하지 않는 것을 볼 수 있듯이 jQuery보다는 JS에 더 익숙해 져야합니다. 그래서 나는 순수한 JS로 일하는 것을 선호한다.

내 newsapi는 : https://newsapi.org

이 내 코드입니다. 사용자 선택 기능없이 작동하는

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 ('#의 newsCat')의 onchange = 함수 (selectedSource) { newsSource = selectedSource.value; // 이것에 의해 여전히 좋지 않습니다. }

Answer 1

다음은 select 요소에서 전송 된 onchange 콜백의 예입니다. 먼저 onchange 이벤트를 어떤 방법으로 연결하기를 원하므로 <select> 태그에 onchange="selectionChanged()" 속성을 추가합니다. newsCat 요소를 가져, 그것이 null가 아닌 경우 (윈도우가로드되기 전에, 할 수있다) 우리가 값입니다지고있다 : 우리가 변화를 처리 할 selectionChange 방법에

. 마지막으로 우리는이 값을 실제로이 값을 사용하는 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>