【发布时间】：2021-05-20 22:47:12
【问题描述】：
所以我正在学习 javascript，我正在尝试创建一个电影数据库，用户在其中输入一个文本框中的电影 ID，然后单击“加载电影按钮”，该按钮加载有关具有该特定 ID 的电影的信息。
我收到了一个 json 文件，其中包含电影的元素，例如 id、标题、发行日期等。我无法将点击处理程序添加到我的电影请求按钮，该按钮创建一个 XMLHttpRequest 对象并提交一个对特定电影的“GET”请求。如果此请求成功，我的回调函数中可用的响应文本将是一个 JSON 字符串，其中包含以下格式的电影信息。所以在控制台中它会打印出来：
{
"Title": "Guardians of the Galaxy Vol. 2",
"Year": "2017",
"Rated": "PG-13",
"Released": "05 May 2017",
"Runtime": "136 min",
"imdbID": "tt3896198",
"Response": "True"
}
它应该只在加载的 html 页面中将标题和运行时打印为常规文本，因为这就是我在 javascript 文件中要求的内容。
为简单起见，此 json 文件仅包含 1 部电影，但我的原始 json 文件将包含数千部电影的信息，因此当我搜索特定电影 id 时，它应该只加载一部电影的信息，而不是所有电影的信息json 文件中的电影。所以如果我在文本框中输入“tt3896198”，这个id应该会加载电影“银河护卫队2”的数据，因为这是与这部电影匹配的id，如json文件所示。
我尝试查找如何使用 XMLHttpRequests 和 JSON 解析从 json 文件中打印特定信息，但问题是我在网上看到的示例能够通过执行“movie.title”之类的操作来访问其 json 文件中的变量，因为他们的变量是小写的。我的 JSON 文件中的所有变量似乎都是大写的，我认为不允许使用 movie.Title。
另外，我想知道如何根据用户输入的 id 加载电影？有 1000 部具有唯一 id 的电影，我不知道如何只加载一部 id 与文本框中输入的 id 匹配的电影。
现在我的页面只显示一个文本框和一个按钮，但按钮不起作用。任何帮助将不胜感激，当我单击按钮时，我主要是从 json 文件中获取数据以显示在控制台和 HTML 页面上。如果有人可以帮助或指导我让电影 id 元素正常工作，那也将不胜感激！
电影.html：
<html>
<head>
<title>Movies page</title>
</head>
<body onload="init()">
<div>
<input type="text" placeholder="Search" name="textbox">
<button type="button" id="retrieveMovies">Load a movie</button>
</div>
<br />
<div id="moviediv">
</div>
<script src="movies.js"></script>
</body>
</html>
movie.js：
let movies = [];
function init(){
document.getElementById("retrieveMovies").onclick = loadMovies;
loadMovies();
}
function loadMovies(){
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let responseObject = JSON.parse(xhttp.responseText);
movies = responseObject.results;
render();
}
};
xhttp.open("GET", "movie.json", true);
xhttp.send();
}
function render(){
let content = "";
movies.forEach(movie =>{
content += `
<div>
<p> Movie: ${movie.Title}</p>
<br/>
<p> Runtime: ${movie.Runtime}</p>
</div>
`
})
document.getElementById("moviediv").innerHTML = content;
}
movie.json:
{"Title":"Guardians of the Galaxy Vol. 2","Year":"2017","Rated":"PG-13","Released":"05 May 2017","Runtime":"136 min","imdbID":"tt3896198","Response":"True"}
更新：所以我尝试创建一个服务器来运行应用程序，而不是直接从我的目录中打开 html 文件。
server.js：
const http = require('http');
const fs = require('fs');
const server = http.createServer(function (request, response) {
if(request.method === "GET" && (request.url === "/index.html" || request.url === "/")){
fs.readFile('index.html', 'utf8', function(err, contents) {
if(err){
response.writeHead(500, { "Content-Type": "text/html"})
response.end();
return;
}
response.writeHead(200, { "Content-Type": "text/html"})
response.end(contents);
});
}else if(request.method === "GET" && request.url === "/style.css"){
fs.readFile('style.css', 'utf8', function(err, contents) {
if(err){
response.writeHead(500, { "Content-Type": "text/css"})
response.end();
return;
}
response.writeHead(200, { "Content-Type": "text/css"})
response.end(contents);
});
}else if(request.method === "GET" && request.url === "/movies.js"){
fs.readFile('movies.js', 'utf8', function(err, contents) {
if(err){
response.writeHead(500, { "Content-Type": "application/javascript"})
response.end();
return;
}
response.writeHead(200, { "Content-Type": "application/javascript"})
response.end(contents);
});
}
});
server.listen(3000);
console.log('Server running at http://127.0.0.1:3000/');
我在我的谷歌浏览器中输入 localhost:3000，它会引导我进入 html 页面。虽然这解决了我之前遇到的错误，但单击添加按钮似乎仍然没有任何反应。
【问题讨论】：
标签： javascript html json xml xmlhttprequest