Question

我对freecodecamp的“wiki app project”的javascript部分有一些问题。当我手动输入搜索参数时，我的wiki API调用正常工作，但我无法弄清楚如何将用户输入作为搜索结果。

我需要帮助运行函数来获取首先输入的文本的值，然后运行ajax代码来获取输入的值。我正在寻找使用vanilla javascript的解决方案。

从我搜索的内容来看，我认为我可以使用回调来做，但我不明白如何正确使用它。下面是我的代码笔。

到目前为止，控制台记录了文本输入的值，但未将值放入ajax url中。我假设因为所有代码都会立即运行。我也遇到了天气应用程序的这个问题并对其进行了暂停，但我知道这不是最好的方法，而且我在解决正确的解决方案时遇到了问题。

var input;
function one () {
  var x = event.keyCode;
  if( x === 13){
    input = document.getElementById("getResults").value;
    console.log(input);

  }
}  
function results() {
  var xhr = new XMLHttpRequest();

xhr.onload = function(){
  var data = JSON.parse(xhr.responseText);

  document.getElementById("x").innerHTML = data[1][0];
  document.getElementById("y").innerHTML = data[2][0];
  document.getElementById("link1").href = data[3][0];
  console.log(data[0]);

}
// testing input // var input = "goku";
var api = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search="
var url = api + input + "&limit=10&origin=*";
xhr.open
 ("GET", url , true)
//orginal url //("GET","https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=goku&limit=10&origin=*", true);
xhr.send(); 
}

Answer 1

回调方法适用于此。 “next”是回调函数。基本上，您提供输入到getWikiPages（我重命名了您的“结果”函数）函数和一个将在XHR请求完成（或错误）时调用的回调函数。

这允许“异步”响应。

var input;
function one () {
  var x = event.keyCode;
  if( x === 13){
    input = document.getElementById("getResults").value;
    console.log('onkeydown',input);

    // [1] What will happen if onload never happens?!
    getWikiPages(input,function(data){
      // [1] This will never get called.
      // do something with the data
      document.getElementById("x").innerHTML = data[1][0];
      document.getElementById("y").innerHTML = data[2][0];
      document.getElementById("link1").href = data[3][0];
    });


  }
}  
function getWikiPages(input,next) {
  var api = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search="
  var url = api + input + "&limit=10&origin=*";
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){
    var data = JSON.parse(xhr.responseText); 
    console.log('onload',data); 
    next(data); // next() is the callback. 
  }

  xhr.open("GET", url , true)
  xhr.send(); 
  // function ends, but next() will be called when it is really done.
  return 'nothing'; // you could return something here, but normally not.
}

javascript回拨（wiki api freecodecamp）

1 个答案: