使用 TMDb 和 axios npm 的电影搜索站点
[英]Movie searching site using TMDb and axios npm
问题描述
I'm trying to make a movie searching site using TMDb and axios npm.
我正在尝试使用 TMDb 和 axios npm 制作电影搜索网站。 What am I doing wrong?我究竟做错了什么？ Search works fine, but I can't access the movies themselves.搜索工作正常，但我无法访问电影本身。
$(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>
--More details, because I have more code: --更多细节，因为我有更多代码：
Search works fine, but I can't access the movies themselves.搜索工作正常，但我无法访问电影本身。 Search works fine, but I can't access the movies themselves.搜索工作正常，但我无法访问电影本身。 Search works fine, but I can't access the movies themselves.搜索工作正常，但我无法访问电影本身。 Search works fine, but I can't access the movies themselves.搜索工作正常，但我无法访问电影本身。
2 个解决方案
解决方案1
0 2020-02-15 18:31:44
This will help you click here , Now it is working.这将帮助您单击此处，现在它正在工作。 There was very small bug, which I mentioned to you.有一个非常小的错误，我向你提到过。
And also fixed the image not showing issue.并且还修复了图像未显示的问题。
解决方案2
0 2020-02-15 19:08:03
Just replace response.data.Search by response.data.results只需将response.data.Search替换为response.data.results
$(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.results; 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 useEffect 从 TMDB 获取流派列表，axios 卡在加载中 - Fetching genre list from TMDB using useEffect and axios stuck on loading
未定义使用npm安装axios - Installing axios using npm is undefined
使用 javascript 和 axios 搜索 Twitter 用户 - Searching for twitter users using javascript and axios
使用 tmdb api 页面加载速度非常慢 - page loads very slowly using tmdb api
使用TMDb API的JSON输入意外结束 - Unexpected end of JSON input using TMDb API
使用 AXIOS 进行电影搜索后，OMDb API 需要帮助获取 /results 页面 - OMDb API need help getting /results page after movie search using AXIOS
Npm 配置 axios - Npm configure axios
axios和axios-es6 npm软件包之间有什么区别？ - Whats the difference between axios and axios-es6 npm packages?
如何在没有这些错误的情况下安装电影预告片 npm package？ - How to install movie-trailer npm package without these errors?
使用for循环收集电影分级 - Collecting movie ratings using a for loop
相关标签