javascript - jQuery.Deferred 异常：未定义数据 - ReferenceError

Question

我在创建动态元素以从使用 ajax 进行 api 调用时返回的 json 值进入 div 时遇到困难。

我在控制台中遇到的错误是：

jQuery.Deferred exception: data is not defined ReferenceError: data is not defined
    at Object.<anonymous(file:///Users/ryanflanagan/iCloud%20Drive%20(Archive)/Desktop/devwork/lozfanpage/script.js:57:27)
    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
    at t (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined

我想说我的编码技能相当初级，但希望有人可以帮助我。

这是我的 HTML

    <div class="container fluid charactercontainer">
      <div id="characterSearch" class="">
        <div class="innercontainer fluid">
          <div class="row">
            <aside class="col-sm-4 bg-light character-index">
              <h4>Search for a Zelda Character:</h4>
              <form
                class="form-inline form-group"
                id="character-form"
                style="width: 85%"
              >
                <input class="form-control" type="text" id="characterinput" />
                <!--Button triggers character to be searched-->
                <button class="searchBtn2 btn btn-primary">
                  <i class="fas fa-search"></i>
                </button>
              </form>
            </aside>
            <div class="col-sm-8 border" id="characterInfoView">
              <!-- <h3 class="characterName"></h3>
              <p class="gender"></p>
              <p class="race"></p>
              <p class="char_description"></p>
              <p class="appearances"></p> -->
            </div>
          </div>
        </div>
      </div>

这是我的 searchCharacter 函数

function searchCharacter() {
  const characterInput = $("#characterinput").val();
  console.log(characterInput);

  const characterQueryURL =
      "https://zelda-api.apius.cc/api/characters?name=" + characterInput;
    console.log(characterQueryURL);

  $.ajax({
    url: characterQueryURL,
    method: "GET",
  }).then(function (response) {
      console.log(response);
      $("#characterInfoView").empty();
      for (var i = 0; i < data.length; i++) {
          console.log(data[i]);
          
          const column = $("<div>").addClass("col-sm-8");
          const card = $("<div>").addClass("card");
          const characterNameEl = $("<h3>")
            .addClass(".characterName")
            .text("Name: " + response.data[i].name);

          const charDescriptionEl = $("<p>")
            .addClass(".char_description")
            .text("Description: " + response.data[i].description);

          const genderEl = $("<p>")
            .addClass(".gender")
            .text("Gender: " + response.data[i].gender);

          const raceEl = $("<p>")
            .addClass(".race")
            .text("Race: " + response.data[i].race);

          const appearancesEl = $("<p>")
            .addClass(".appearances")
              .text("Appearances: " + response.data[i].appearances);
          
          card.append(characterNameEl);
          card.append(genderEl);
          card.append(raceEl);
          card.append(appearancesEl);
          card.append(charDescriptionEl);
          column.append(card);

          $("#characterInfoView").append(column);
          
      }
  });
}

单击时带有事件侦听器以触发功能

$(".searchBtn2").on("click", function (event) {
  event.preventDefault();
  searchCharacter();
});

我尝试为 searchCharacter 函数添加一个参数，例如“response”或“data”或“characterInput”。

但那些都行不通。

我可以让 ajax 调用正常工作，但在我的页面的 div 块中不会显示关于角色数据点（种族、性别、外表、姓名等）的任何内容。

基本上我想我也会做一个 for 循环，这样我就可以在 characterInfoView div 中为具有多个外观的字符创建多个卡片，如对象数据数组中的多个索引所示。

使用 response.data[i].________（种族、性别、描述等）在循环运行时为每个特定索引项引入 json 数据。

对此的任何帮助将不胜感激！

谢谢！

标签： javascriptjqueryajaxapi