2015-04-11 4 views
0

Я создал код ниже, но он не работает должным образом. Где я ошибся и что я забыл включить?SoundCloud: результаты поиска и отображения с использованием Javascript

var search = document.getElementById("search").value; 
 
var xhr = new XMLHttpRequest(); 
 

 
function results() { 
 
    console.log(search); 
 
\t xhr.send() 
 
} 
 
document.getElementById("results").innerHTML = results(); 
 

 

 
// Send the XHR 
 
xhr.open('GET', 'https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search;', true);
<html> 
 
<head> 
 
<!-- JS --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    
 
</head> 
 
<body> 
 
<input type="search" id="search" /> 
 
<button onclick="results()">Search</button> 
 
<p id="results"></p> 
 

 
</body> 
 
</html>

+0

Это может помочь http://stackoverflow.com/questions/9713058/sending-post-data-with-a-xmlhttprequest : Дайте мне знать, если не – rakeeee

ответ

1

Ваш код будет работать на загрузке страницы, но вы хотите создать прослушиватель события, который ждет вашего пользователя нажать Search и затем выполнить запрос.

Try:

$('#search').click(function(){ 
    var search = document.getElementById("search").value; 
    var xhr = new XMLHttpRequest(); 
    var results = xhr.open('GET', 'https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search;', false); 
    document.getElementById("results").innerHTML = results; 
}) 

«ложь» параметр в запросе XHR предотвращает запуск кода асинхронно, но я уверен, что вы могли бы каким-то образом использовать обратные вызовы?

0

Фигурные это ...

function audioResults(){ 
 
    var search = document.getElementById("search").value; 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', "https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search, false); 
 
\t xhr.addEventListener("load", function() { 
 
\t \t document.getElementById("results").innerHTML = xhr.response; 
 
\t }, false); 
 
\t xhr.send(); 
 
}
<html> 
 
<head> 
 
<!-- JS --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    
 
</head> 
 
<body> 
 
    
 
<input type="search" id="search" /> 
 
    
 
<button onclick="audioResults()">Search</button> 
 
    
 
<p id="results"></p> 
 

 

 
</body> 
 
</html>

Смежные вопросы