jQuery ajax报data未定义ReferenceError，无法动态渲染Zelda角色API返回数据

报错触发的直接原因 #

控制台抛出data is not defined错误，根源是for循环的判断条件写了i < data.length，但在当前的ajax回调作用域里，根本没有定义过名为data的独立变量——接口返回的角色列表实际存在response.data结构中。JavaScript执行到这行代码时找不到对应变量，直接中断整个回调流程，后续所有DOM生成、元素插入的逻辑都不会执行，这也是为什么看不到任何内容渲染的核心原因。

其余影响功能正常运行的隐藏问题 #

• 使用jQuery的addClass()方法时，传入的类名不需要带前缀.，当前代码里写的.characterName、.char_description这类参数，会让生成的元素class名实际包含多余的点（最终渲染为class=".characterName"），完全匹配不到预设的样式规则。
• 页面布局里#characterInfoView本身已经是占满col-sm-8宽度的Bootstrap栅格列，循环生成角色卡片时不需要再额外嵌套一层col-sm-8的div，否则会造成栅格嵌套错位，卡片宽度显示异常。
• 搜索输入的文本没有做URL编码，遇到带空格、特殊符号的角色名时，会导致API请求参数解析错误，返回非预期结果。

修正后的可直接运行的代码 #

function searchCharacter() {
  const characterInput = $("#characterinput").val().trim();
  // 空输入拦截，避免无意义请求
  if (!characterInput) {
    $("#characterInfoView").html("<p>请输入要搜索的角色名称</p>");
    return;
  }

  // 对输入内容做URL编码，兼容特殊字符场景
  const characterQueryURL = "https://zelda-api.apius.cc/api/characters?name=" + encodeURIComponent(characterInput);

  $.ajax({
    url: characterQueryURL,
    method: "GET",
  }).then(function (response) {
    $("#characterInfoView").empty();
    // 提取接口返回的角色数组为独立变量，解决未定义的问题
    const characterList = response.data;
    // 无搜索结果的兜底处理
    if (!characterList || characterList.length === 0) {
      $("#characterInfoView").html("<p>未找到匹配的塞尔达角色</p>");
      return;
    }

    // 遍历角色列表生成卡片
    for (let i = 0; i < characterList.length; i++) {
      const currentCharacter = characterList[i];
      
      const card = $("<div>").addClass("card mb-3 p-3");
      const characterNameEl = $("<h3>")
        .addClass("characterName")
        .text("Name: " + currentCharacter.name);

      const charDescriptionEl = $("<p>")
        .addClass("char_description")
        .text("Description: " + currentCharacter.description);

      const genderEl = $("<p>")
        .addClass("gender")
        .text("Gender: " + (currentCharacter.gender || "未知"));

      const raceEl = $("<p>")
        .addClass("race")
        .text("Race: " + (currentCharacter.race || "未知"));

      const appearancesEl = $("<p>")
        .addClass("appearances")
        .text("Appearances: " + (currentCharacter.appearances?.join(", ") || "未知"));
      
      card.append(characterNameEl, genderEl, raceEl, appearancesEl, charDescriptionEl);
      // 直接将卡片追加到已有的信息容器内，不做多余嵌套
      $("#characterInfoView").append(card);
    }
  }).catch(function(error) {
    // 请求异常兜底提示
    $("#characterInfoView").html("<p>数据加载失败，请稍后重试</p>");
    console.error("请求异常:", error);
  });
}

效果验证 #

替换代码后重新触发搜索，控制台不会再抛出未定义变量的报错，匹配到的角色信息会以卡片形式正常渲染在指定容器内。

内容的提问来源于stack exchange，提问作者RFlanagan82