如何使用JavaScript和Ajax调用OMDB API获取所有匹配的电影标题

问题根因 #

你当前调用OMDB API时使用了t参数，该参数的作用是精确匹配单个电影的完整标题，所以只会返回1条结果。要实现多结果模糊搜索，替换为s参数并适配对应响应结构即可。

核心改动点 #

• 替换请求URL的查询参数：将t=${name}改为s=${encodeURIComponent(name)}，s是OMDB提供的模糊搜索接口，会返回所有标题包含关键词的内容，搭配已有的type=movie参数即可过滤出仅电影类结果；用encodeURIComponent处理关键词，比手动替换空格兼容性更好，能适配特殊字符、多空格等场景。
• 修改响应解析逻辑：s参数返回的响应中Search字段是所有匹配电影的数组，需要遍历该数组拼接输出内容，同时增加业务错误判断（无匹配结果时OMDB会返回Response: "False"，哪怕HTTP状态码为200也需要单独处理）。

完整修改后代码 #

JS代码

document.getElementById("getForm").addEventListener("submit", (e) => {
    e.preventDefault();
    // 此处替换为你自己申请的有效OMDB API密钥
    const OMDB_API_KEY = "你的OMDB密钥";
    loadMovies(document.querySelector("input[name='query']").value, OMDB_API_KEY);
});
  
function loadMovies(name, apiKey) {
    var omdbAPI = new XMLHttpRequest();
    // 核心改动：替换t参数为s参数，优化关键词编码
    var omdbURL = `https://www.omdbapi.com/?s=${encodeURIComponent(name)}&type=movie&apikey=${apiKey}`;
    omdbAPI.open("get", omdbURL, true);
  
    omdbAPI.onload = function() {
        if (this.status == 200) {
            var result = JSON.parse(this.responseText);
            // 判断是否有匹配结果
            if (result.Response === "False") {
                document.getElementById('result').innerHTML = "<p>未找到匹配的电影，请更换关键词重试</p>";
                return;
            }
  
            var output = "";
            // 遍历搜索结果数组拼接DOM
            result.Search.forEach(movie => {
                output +=
                '<div class="user">' +
                `<h3>标题: ${movie.Title}</h3>` +
                `<p>年份: ${movie.Year}</p>` +
                '</div>';
            });
            document.getElementById('result').innerHTML = output;
        } else {
            alert("请求失败，请检查网络或API密钥配置");
        }
    }
    omdbAPI.send();
}

HTML代码（无需修改，保持原有即可）

<form action="" method="get" id="getForm">
  Movie: <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<div id="result">
            
</div>

小提示：OMDB的s接口默认单页返回10条结果，如果需要获取更多内容，可以额外添加page参数请求不同分页的数据。

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