如何利用Jikan.moe API v4展示全部搜索到的动漫指定数据？

问题根源 #

• 请求URL中的limit=1参数限制API仅返回1条数据，这是无法看到更多搜索结果的核心原因
• 代码中直接取data.data[0]，只处理了第一条结果，没有遍历整个结果集合

具体修改步骤 #

1. 调整API请求参数：移除limit=1，或者根据需求设置合适的条数（比如limit=20，Jikan API默认返回25条），确保能获取到所有匹配的搜索结果
2. 遍历结果数组：不再只取第一条数据，而是用循环遍历data.data数组，为每个动漫生成对应的展示区块
3. 清空历史结果：每次发起新搜索前，先清空anime-data容器里的旧内容，避免新旧结果堆积

完整修改代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Anime Search</title>
    <style>
      /* 可选：添加样式让结果更美观 */
      .anime-item {
        border: 1px solid #eee;
        padding: 15px;
        margin: 10px 0;
        border-radius: 8px;
      }
      .anime-item img {
        max-width: 200px;
        height: auto;
      }
    </style>
  </head>
  <body>
    <h1>Anime Search</h1>
    <form>
      <label for="anime-name">Enter anime name:</label><br>
      <input autocomplete="off" type="text" placeholder="anime..." id="anime-name" name="anime-name"><br>
      <button type="button" onclick="getAnimeData()">Submit</button>
    </form>
    <div id="anime-data"></div>
    <script>
      const API_URL = 'https://api.jikan.moe/v4';
      function getAnimeData() {
        const animeName = document.getElementById('anime-name').value;
        const animeContainer = document.getElementById('anime-data');
        
        // 清空历史结果
        animeContainer.innerHTML = '';
        
        // 移除limit=1，获取所有匹配结果（默认返回25条）
        fetch(`${API_URL}/anime?q=${animeName}&sfw`)
          .then(response => response.json())
          .then(data => {
            // 遍历所有动漫结果
            data.data.forEach(anime => {
              const imageUrl = anime.images;
              const animeItemDiv = document.createElement('div');
              animeItemDiv.className = 'anime-item'; // 给每个条目加类名方便样式控制
              animeItemDiv.innerHTML = `
                <img src="${imageUrl.jpg.image_url}" alt="${anime.title}">
                <p><b>Title:</b> ${anime.title}</p>
                <p><b>Local Name:</b> ${anime.title_japanese || 'N/A'}</p>
                <p><b>Synopsis:</b> ${anime.synopsis || 'No synopsis available'}</p>
                <p><b>Type:</b> ${anime.type || 'N/A'}</p>
                <p><b>Total Episodes:</b> ${anime.episodes || 'Unknown'}</p>
              `;
              
              animeContainer.appendChild(animeItemDiv);
            });
          })
          .catch(error => {
            animeContainer.innerHTML = `<p>Error loading data: ${error.message}</p>`;
          });
      }
    </script>
  </body>
</html>

额外优化说明 #

• 添加了简单的CSS样式，让结果展示更整洁
• 处理了可能的空值（比如没有日文名、简介为空的情况），避免页面显示undefined
• 增加了错误捕获，请求失败时会显示错误信息

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