Api 调用没有 jQuery / javascript

Question

我正在尝试对网站使用 pokeApi，但我的功能第二次不起作用。

结果在下一个=下一个link我想用那个Apireturns.

const beginLink = "https://pokeapi.co/api/v2/pokemon/";
let next;
let previous;
apiCall(beginLink);

function apiCall(link) {
  $('#pokemons').html(``);
  $.ajax({
    url: link
  }).done(handleResponse);
  
  function handleResponse(data) {
    next = data.next;
    previous = data.previous;
    for (let i = 0; i < 20; i++) {
      $('#pokemons').append(`<div class="pokemon"><img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/${data.results[i].name}.png"><br><p>${data.results[i].name}</p></div>`);
    }
  }
}

$("#next").on("click ", apiCall(next));

Answer 1

主要问题是因为 apiCall(next) 没有 return 函数。因此，当点击事件发生时，什么也没有发生。

要解决此问题，并消除对应该避免的全局变量的依赖，您可以将下一次调用的 URL 放入 [=14] 持有的 data =] 元素。这样，根据 AJAX 响应更新 DOM 内容的函数完全是 self-contained.

let $next = $('#next');
let $pokemonContainer = $('#pokemons');

function apiCall() {
  $pokemonContainer.empty();
  $.get($next.data('url')).done(handlePokemonApiResponse);
}

function handlePokemonApiResponse(data) {
  $next.data('url', data.next);
  let html = data.results.map(p => `<div class="pokemon"><img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/${p.name}.png"><br><p>${p.name}</p></div>`);
  $pokemonContainer.html(html);
}

$next.on("click", apiCall).trigger('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button type="button" id="next" data-url="https://pokeapi.co/api/v2/pokemon/">Next</button>
<div id="pokemons"></div>

Api 调用没有 jQuery / javascript

Api call doesn't jQuery / javascript

javascript

jquery

web