数据未在JavaScript API中显示

Question

我正在制作一个Pokedex API作为辅助项目，我无法显示在不同文本框中显示所需的数据。我正在使用GET请求来请求身高，体重，类型和能力。

<script>

$("button").click( function(){

    var pokemonName = $('pokemon').val(pokemon);
    event.preventDefault();
    getPokemonData(pokemonName);
})

function getPokemonData(pokemonName){
var request = new XMLHttpRequest()

//GET request with link

 request.open('GET','https://pokeapi.co/api/v2/pokemon/' + pokemonName, true);
// request for data
 request.onload =function(){
     var data = JSON.parse(this.response)
     if(request.status >= 200 && request.status <= 400)
     {
       // outputs data
       $(pokemonheight).val(response.height)
       $(pokemonweight).val(response.weight)
       $(pokemonAblity).val(response.ability)
       $(pokemonType).val(response.type)
     }
     else
     {
       alert ("Error");
     }
     request.send();
                          }
                                  }
</script>
</html>

我已经尝试设置一个等于响应JSON元素的变量，然后将其输入到文本框的值中。

如果声明，我没有按预期返回任何内容或在控制台中显示输入。

Answer 1

发行（S）

您的代码存在一些问题：

1. var pokemonName = $('pokemon').val(pokemon);你在这里设置一个名为pokemon（无效）的元素的值
2. var data = JSON.parse(this.response);这是什么。回应正在设定？我们不应该在回调中收到回应吗？
3. request.send();在onload事件中，因此请求永远不会被发送

评测

我在这里的主要批评是你包含了一个相当大的库（jQuery），并没有利用它来发出请求。 $.ajax有很好的文档记录，并清理了许多XMLHttpRequest的复杂性。

解决方案

$("button").click(function() {

  var pokemonName = $('#pokemon').val();
  //event.preventDefault();
  getPokemonData(pokemonName);
})

function getPokemonData(pokemonName) {
  var request = new XMLHttpRequest()

  //GET request with link

  request.open('GET', 'https://pokeapi.co/api/v2/pokemon/' + pokemonName, true);
  // request for data
  request.onload = function(response) {
    var data = JSON.parse(response.currentTarget.response)
    if (request.status >= 200 && request.status <= 400) {
      // outputs data
      console.log(data)
    } else {
      alert("Error");
    }
  }
  request.send();
}

<input id="pokemon" value="12" />
<button>search</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

考虑到所有上述问题，我能够得到一个最终应该是什么样子的实例。

希望这可以帮助！