TMDB API数据获取异常：JavaScript电影搜索功能无结果求助

我使用TMDB API、JavaScript、CSS和HTML搭建电影网站，实现搜索查询功能时，能收到状态码200，但调用res.json()后fetch函数就终止了，无法继续处理数据，搜索结果无法展示。

相关代码 #

请求URL #

const BASE_URL = "https://api.themoviedb.org/3/";
const API_KEY = "api_key=9b62c3eb4a6bc8acd4e26602f16fa744";
let SEARCH_URL = BASE_URL + "search/movie?" + API_KEY + "&sort_by=popularity.desc&query=";

搜索函数 #

function searchMovie() {
    let f = document.getElementById('search_movie');
    f.addEventListener('submit', () => {
        let user_input = search_input.value;
        if (user_input && user_input.trim() != '') {
            let query = SEARCH_URL + user_input;
            console.log();
            getMovies(query);
        }
    });
}

Fetch函数 #

function getMovies(my_api) {
    main.innerHTML = '';
    fetch(my_api, {
        method: 'GET',
        cache: "no-cache",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" }
    }).then(res => res.json()).then(data => {
        let arr = data.results;
        if (arr && arr.length > 0) {
            arr.forEach(movie => {
                addMovie(movie);
            });
        }
        else {
            getMovies(MOVIE_URL, DEFAULT_PAGE);
            console.log("Can't find results");
        }
    }).catch(err => {
        console.log(err.message);
    });
}

修复方案 #

1. 阻止表单默认提交行为 #

表单提交会触发页面刷新，导致fetch请求还未处理完成就被中断。在submit事件回调中添加event.preventDefault()：

function searchMovie() {
    let f = document.getElementById('search_movie');
    f.addEventListener('submit', (event) => {
        event.preventDefault(); // 阻止页面刷新
        let user_input = search_input.value;
        if (user_input && user_input.trim() != '') {
            let query = SEARCH_URL + encodeURIComponent(user_input); // 编码用户输入
            console.log(query); // 打印请求URL用于调试
            getMovies(query);
        }
    });
}

2. 编码用户输入 #

用户输入的空格、特殊字符会破坏URL格式，导致返回的内容不是合法JSON，res.json()解析失败。用encodeURIComponent()处理用户输入，确保URL格式正确。

3. 移除不必要的请求头 #

TMDB的GET请求不需要Content-Type: application/json头，这个头会干扰服务器返回内容的解析，直接移除：

function getMovies(my_api) {
    main.innerHTML = '';
    fetch(my_api, {
        method: 'GET',
        cache: "no-cache",
        credentials: "same-origin"
    }).then(res => {
        // 先验证请求是否真的成功
        if (!res.ok) {
            throw new Error(`HTTP错误！状态码: ${res.status}`);
        }
        return res.json();
    }).then(data => {
        console.log(data); // 打印返回数据，确认结构是否正确
        let arr = data.results;
        if (arr && arr.length > 0) {
            arr.forEach(movie => {
                addMovie(movie);
            });
        }
        else {
            console.log("未找到结果");
            // 注意：MOVIE_URL和DEFAULT_PAGE需确保已定义，否则注释掉下面的调用
            // getMovies(MOVIE_URL, DEFAULT_PAGE);
        }
    }).catch(err => {
        console.log(err.message);
    });
}

4. 增加调试日志 #

添加console.log(query)和console.log(data)，可以直观看到拼接的请求URL和返回的数据结构，快速定位问题。

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