javascript - 数据未在 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

问题

您的代码存在一些问题:

1. var pokemonName = $('pokemon').val(pokemon); 您正在此处设置某个名为 pokemon 的元素的值(无效)
2. var data = JSON.parse(this.response);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>

考虑到上述所有问题，我能够得到一个工作示例，说明它最终应该是什么样子。

希望这有帮助!