創建一個支持AJAX的數據驅動應用程序

-5

當我鍵入一個藝術家，然後單擊按鈕時，我應該以美觀的格式獲得他們歌曲的精美列表。創建一個支持AJAX的數據驅動應用程序

我的錯誤是：無論什麼時候我按下按鈕，我不知道這是爲什麼。

HTML文件

<!DOCTYPE html> 
<html> 
<head> 
    <title>Songs</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    </script> 
    <script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script> 
    <script src="ajaxfunctions.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <h2>Songs </h2> 
     <br/> 
     <p>Try entering an artist to find their songs</p> 
     <div> 
      <div id="musicbox" class="control-group"> 
       <label for="songs">artistr</label> 
       <input type="text" name="songs" id="songs" placeholder="Type an artist to their songs" /> 
      </div> 
     </div> 
     <br /> 
     <div> 
      <button class='btn btn-success btn-large' onclick="Music('songs')">Find Songs</button> 
     </div> 
     <br /> 
     <div> 
     </div> 
    </div> 
</body> 
</html>

JS文件

function Music(songs) { 
    var yourmusic = document.getElementById(songs).value; 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.onreadystatechange = function() { 
     if (this.readyState === 4) { 
      if(this.status === 200) { 
       displayMusic(this.responseText); 
      } else if (this.status === 404){ 
       displayMusic('{ "songs" : "none" }'); 
      } else { 
       console.log("We have a problem: " + this.status); 
      } 
     } else { 
     } 
    }; 
    var url = " https://api.mixcloud.com/discover/funk/"; 
    httpRequest.open("GET", url, true); 
    httpRequest.send(); 
} 

function displayMusic(data){ 
    var music = JSON.parse(data); 
    if(music.songs === "none") { 
     document.getElementById("songs").className = "alert alert-warning";\ 
     document.getElementById("songs").innerHTML ="there are no songs for this artist" 
     document.getElementById("songs").innerHTML = "The songs are" + music; 
    } else { 
     document.getElementById("songs").className = "alert alert-success"; 
     document.getElementById("songs").innerHTML = "The songs are" + music; 
    } 
}

來源

2017-06-05 Kathy Duarte

因爲'的document.getElementById（「音樂」）'返回NULL '。您沒有具有該ID的元素。 – nnnnnn

我解決了這個問題，但是每當我點擊底部時，我都沒有收到任何迴應，我不知道爲什麼 –

您檢查代碼：

document.getElementById("music") // element id "music" not exist

來源

2017-06-05 03:27:38

我修正了這個問題，但是每當我點擊底部時，我都沒有收到任何迴應，我不知道爲什麼 –

可以在函數displayMusic（）運行後添加id「music」，當您調用ajax時。 –

我不是很詭計 –

創建一個支持AJAX的數據驅動應用程序

回答

相關問題