SoundCloud：使用Javascript搜索和显示结果

Question

我已经在下面创建了代码，但是无法正常工作。 我在哪里弄错了，或者忘记了什么？

 var search = document.getElementById("search").value; var xhr = new XMLHttpRequest(); function results() { console.log(search); 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>

Answer 1

您的代码将在页面加载时运行，但是您想创建一个事件侦听器，以等待用户按Search并执行您的请求。

尝试：

$('#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请求中的'false'参数阻止代码异步运行，但是我确定您可以以某种方式使用回调？

Answer 2

弄清楚了...

 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); xhr.addEventListener("load", function() { document.getElementById("results").innerHTML = xhr.response; }, false); 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>

SoundCloud：使用Javascript搜索和显示结果

问题描述

2 个解决方案

解决方案1
1 2015-04-11 03:45:41

解决方案2
0 2015-04-11 07:02:48

SoundCloud：使用Javascript搜索和显示结果

问题描述

2 个解决方案

解决方案1 1 2015-04-11 03:45:41

解决方案2 0 2015-04-11 07:02:48

解决方案1
1 2015-04-11 03:45:41

解决方案2
0 2015-04-11 07:02:48