JavaScript AJAX按ID请求API获取电影数据无结果问题排查

你的代码拉取不到数据主要是几个逻辑错误导致的：

• 输入值读取时机完全错误：id 是在页面刚加载完成时就获取的输入框内容，此时用户还没做任何输入，拿到的值永远是空字符串，拼接出来的请求接口地址缺少有效ID，自然无法返回正确电影数据。而且你在请求成功后还把全局的id变量覆盖成接口返回的电影ID，会导致后续点击按钮时，永远用第一次请求返回的ID发请求，完全读不到用户新输入的内容。
• 错误提示逻辑缺失：当输入的ID不存在时，接口会返回404状态码，你的代码只在控制台打印了报错信息，没有在页面渲染“未找到电影”的提示，用户看不到反馈。
• 细节语法问题：obj、str变量使用前没有用let/const声明，容易造成全局变量污染；图片标签写错，HTML标准中图片标签是<img>不是<image>；原代码中缺少id为list的结果容器，代码运行时会因为找不到DOM节点报错。

<form>
    <input type="number" id="inputId" placeholder="Enter a number"/>
    <input type="button" id="fetchId" value="Fetch Movie" class="btn btn-primary"/>
</form>
<!-- 新增结果渲染容器 -->
<div id="list"></div>

<script>
const fetchBtn = document.getElementById("fetchId");
fetchBtn.addEventListener("click", selectHandler);

function selectHandler() {
    // 每次点击按钮时再读取用户最新输入的ID，做基础空值校验
    const inputId = document.getElementById("inputId").value.trim();
    const listContainer = document.getElementById("list");
    
    if (!inputId) {
        listContainer.innerHTML = `<p>请输入有效的电影数字ID</p>`;
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open("GET",
`https://my-json-server.typicode.com/daijonbereola/restful-api-react/movies/${inputId}`, true);

    xhr.onload = function () {
        if (this.status === 200) {
            const movieObj = JSON.parse(this.responseText);
            const contentStr = `
                <div style="padding: 5px 5px;">
                    <a href="${movieObj.url}">${movieObj.title}</a>
                    <img style="max-width: 60%;" src="${movieObj.image}" alt="movie poster"/>
                </div>
            `;
            listContainer.innerHTML = contentStr;
        } else {
            listContainer.innerHTML = `<p>Movie not found...Please try again</p>`;
            console.log("File not found");
        }
    }
    xhr.send();
}
</script>

内容的提问来源于stack exchange，提问作者New CS Developer