如何输入搜索查询以从 JSON 数据中获取所需的图像？

Question

我目前正在使用 TMDB API 构建一个网络应用程序，当我输入任何电影名称时，它应该会显示所需电影的海报。我不知道如何搜索所需的电影并获取海报的 URL。链接 ->https://developers.themoviedb.org/3/movies/get-movie-images and https://developers.themoviedb.org/3/configuration/get-api-configuration

我的代码：

<html>
<head>
    <title>Test app</title>
    <style type="text/css">
        #fetch{
            position: absolute;
            text-align: center;
            left: 450px;
            top: 35px;
        }
    </style>
</head>
<body>

<form name="fetch-movie-title" id="fetch">
     <input type="text" placeholder="Enter a movie title" id="term" />
     <input type="submit" onclick="showdata()" id="search" value="Find me a poster" />
</form>

<script type="text/javascript">

function showdata() {
    var film = document.getElementById('term').value;
    console.log(film);
}

    var requestURL = "https://api.themoviedb.org/3/movie/9340/images?api_key=my-api-key";

    var request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

    request.onload = function(){
        var myjsondata = request.response; //request.response contains all our JSON data 

        console.log(myjsondata);
        var str = "<img src = 'https://image.tmdb.org/t/p/w500"+ myjsondata.posters[2].file_path +"'/>";
        console.log(str);
        document.write(str);
    } 

</script>
</body>
</html>

Answer 1

我无法测试它，因为获取他们的 API 密钥太麻烦了，但我猜你需要的是 search call:

<html>
<head>
    <title>Test app</title>
    <style type="text/css">
        #fetch{
            position: absolute;
            text-align: center;
            left: 450px;
            top: 35px;
        }
    </style>
</head>
<body>

<form name="fetch-movie-title" id="fetch">
     <input type="text" placeholder="Enter a movie title" id="term" />
     <input type="submit" onclick="showdata()" id="search" value="Find me a poster" />
</form>

<script type="text/javascript">

function showdata() {
    var film = document.getElementById('term').value;
    console.log(film);

    var requestURL = "https://api.themoviedb.org/3/search/movie?api_key=<<api_key>>&language=en-US&query="+film+"&page=1&include_adult=false";

    var request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

    request.onload = function(){
        var myjsondata = request.response; //request.response contains all our JSON data 

        console.log(myjsondata);
        var str = "<img src = 'https://image.tmdb.org/t/p/w500"+ myjsondata.results[0].poster_path+"'/>";
        console.log(str);
        document.write(str);
    } 

</script>
</body>
</html>

查看此 link -> https://developers.themoviedb.org/3/search/search-movies，然后使用您的 api 键和搜索查询点击尝试。

如何输入搜索查询以从 JSON 数据中获取所需的图像？

How to input search query to get required image from JSON data?

javascript

json

themoviedb-api