【发布时间】：2020-05-31 02:55:27
【问题描述】：
我正在尝试使用 TMDb 和 axios npm 制作电影搜索网站。我究竟做错了什么？ 搜索工作正常，但我无法访问电影本身。
$(document).ready(() => {
$('#searchForm').on('submit', (e) => {
let searchText = $('#searchText').val();
getMovies(searchText);
e.preventDefault();
});
});
function getMovies(searchText) {
axios.get('https://api.themoviedb.org/3/search/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US&query=' + searchText)
.then((response) => {
console.log(response);
let movies = response.data.Search;
let output = '';
$.each(movies, (index, movie) => {
output += `
<div class="col-md-3">
<div class="well text-center">
<img src="${movie.poster_path}">
<h5>${movie.original_title}</h5>
<a onclick="https://www.themoviedb.org/movie/('${movie.id}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
});
$('#movies').html(output);
})
.catch((err) => {
console.log(err);
});
}
function movieSelected(id) {
sessionStorage.setItem('id', id);
window.location = 'movie.html';
return false;
}
function getMovie() {
let id = sessionStorage.getItem('id');
axios.get('https://api.themoviedb.org/3/movie/' + id + '?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US')
.then((response) => {
console.log(response);
let movie = response.data;
let output = `
<div class="row">
<div class="col-md-4">
<img src="${movie.Poster}" class="thumbnail">
</div>
<div class="col-md-8">
<h2>${movie.Title}</h2>
<ul class="list-group">
<li class="list-group-item"><strong>Genre:</strong> ${movie.genres.Name}</li>
<li class="list-group-item"><strong>Released:</strong> ${movie.release_date}</li>
<li class="list-group-item"><strong>Rated:</strong> ${movie.vote_average}</li>
<li class="list-group-item"><strong>Review:</strong> ${movie.overview}</li>
</ul>
</div>
</div>
<div class="row">
<div class="well">
<h3>Plot</h3>
${movie.Plot}
<hr>
<a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View TMDb</a>
<a href="index.html" class="btn btn-default">Go Back To Search</a>
</div>
</div>
`;
$('#movie').html(output);
})
.catch((err) => {
console.log(err);
});
}#movies img,
#movie img {
width: 100%;
}
@media(min-width:960px) {
#movies .col-md-3 .well {
height: 390px;
}
#movies .col-md-3 img {
height: 240px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MovieInfo</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search Movies...">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>--更多细节，因为我有更多代码：
搜索工作正常，但我无法访问电影本身。 搜索工作正常，但我无法访问电影本身。 搜索工作正常，但我无法访问电影本身。 搜索工作正常，但我无法访问电影本身。
【问题讨论】：
-
原因是，您在一个数组中获得了超过 1 部电影，但您的代码只需要一部电影。
-
也许你知道如何让它发挥作用。请帮忙。
-
我在您的代码中发现了错误，只需在
getMovies函数中将let movies = response.data.Search;替换为let movies = response.data.results;。
标签： javascript html imdb