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').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：Search＆amp;使用Javascript显示结果

2 个答案: