AJAX 呼叫应答出现和消失

Question

我正在使用 Jquery 和 ajax 编写应用程序。响应正在加载到 HTML，然后消失。

HTML

 <figure class="card card--normal" id="firstResponse">
          <div class="card__image-container">
            <img id="#pokemon1Image" src="" alt="card" class="card__image">   
          </div>
          
          <figcaption class="card__caption">
            <h1 id="pokemon1Name"></h1>
        
       
              <h3 class="card__type" id="pokemon1Type"></h3>
          
        
            <table class="card__stats">
              <tbody><tr>
                <th>HP</th>
  
    <td id="Pokemon1Exp"></td>
              </tr>
              <tr>
                <th>Attack</th>
                <td id='pokemon1Attack'></td>
              </tr>
              
              <tr>
                 <th>Defense</th>
                <td id="pokemon1Defense"></td>
              </tr>
        
              <tr>
                <th>Special Attack</th>
                <td></td>
              </tr>
              <tr>
                <th>Special Defense</th>
 
    <td> <p id="pokemon1Defense"></p></td>
   

回应

.then(function (response) {
    var pokeID = response.id;
    var imageURL =


    $("#pokemon1Image").attr("src", imageURL);
    $("#pokemon1Name").html(nameOfPokemon);
    // $("#pokemon1Type").text(type + " type");
var attack =response.stats[1].base_stat
    // $("#pokemon1Attack").text(attack);
    // $("#pokemon1Defense").text(response.stats[2].base_stat);
    $("#pokemon1Speed").html(response.stats[5].base_stat);
    $("#pokemon1Exp").html(response.base_experience);
    $("#Ability").html(response.abilities.ability[0])

  

我觉得我整天都在这样做。有谁知道为什么会这样，你能帮忙吗？

谢谢

Answer 1

鉴于您共享的代码，很难判断您面临什么问题。
据我所知，结果没有理由消失。 我确实对代码进行了一些修改，以确保它的功能与我期望的一样。

下面的 sn-p 应该加载 pokemon。

// define the search function. we will attach it to the button latter. 
function pokemonOne(search) {
  //build the url.
  var queryURL = "https://pokeapi.co/api/v2/pokemon/" + search;
  // execute the api call
  $.ajax({
    url: queryURL,
    method: "GET",
    dataType: "json",
  }).then(function(response) {
    // process the api call
    var pokeID = response.id;
    var nameOfPokemon = response.name;
    $("#pokemon1Name").html(nameOfPokemon);
    // get the image url from the response. or build it yourself
    var imageURL = response.sprites.front_default
    //var imageURL = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + pokeID + ".png";

    $("#pokemon1Image").attr("src", imageURL);
    var attack = response.stats[1].base_stat
    $("#pokemon1Attack").text(attack);
  })
}

$(document).ready(function() {
  // attach hook to the search button
  $("#search-btn").on("click", function() {
    // capture the input
    var userInput = $("#input").val();
    var search = userInput.toLowerCase();
    // clear the input
    $("#input").val("");
    // execute the search function
    pokemonOne(search);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input id="input" value='arcanine' />
  <button id="search-btn">
    search
  </button>
</div>

<figure class="card card--normal" id="firstResponse">
  <div class="card__image-container">
    <img id="pokemon1Image" src="" alt="card" class="card__image">
  </div>

  <figcaption class="card__caption">
    <h1 id="pokemon1Name"></h1>
    <h3 class="card__type" id="pokemon1Type"></h3>
    <table class="card__stats">
      <tbody>
        <tr>
          <th>Attack</th>
          <td id='pokemon1Attack'></td>
        </tr>
      </tbody>
    </table>
  </figcaption>
</figure>