Question

我正在关注YouTube上有关如何从myapifilms.com api获取数据的教程，我无法将数据呈现为HTML。目前我的ajax调用正在运行，数据显示在控制台中。我遇到的问题是让数据显示在页面本身上。我搜索了已经问过但没有运气的问题。到目前为止，这是我的js代码：

:attribute

我觉得我如此接近，但不能完全理解我所缺少的东西。我再次关注一个教程，所以如果有更好的方法来实现这个目标，我绝对愿意接受建议。

更新

我将代码更改为此，并且我在浏览器中未定义。我将for循环更改为此

$(document).ready(function(){

$("#searchMovie").click(searchMovie);
var movieTitle = $("#movieTitle");
var table = $("#results");
var tbody = $("#results tbody"); //table.find("tbody");

function searchMovie() {

   var title = movieTitle.val();


   $.ajax({

       url: "http://www.myapifilms.com/imdb/idIMDB?title="+ title +"&token= + token goes here +&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&quotes=0&fullSize=0&companyCredits=0",
       dataType: "jsonp",
       success: renderMovies

   })

   function renderMovies(movies) {
       console.log(movies);

       tbody.empty();

       for(var m in movies) {

           var movie = movies[m];
           var title = movie.title;
           var plot = movie.simplePlot;
           var posterUrl = movie.urlPoster;
           var imdbUrl = movie.urlIMDB;

           var tr = $("<tr>");
           var titleTd = $("<td>").append(title);
           var plotTd = $("<td>").append(plot);

           tr.append(titleTd);
           tr.append(plotTd);
           tbody.append(tr);

       }



    }
   }

});

Answer 1

我想出了一个解决方案，而不是使用myapifilms，我使用了tmdb api。将我的代码更改为此工作：

var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie?query=',
    input,
    movieName,
    key = 'myapikey';

//Function to make get request when button is clicked to search    

$('button').click(function() {
    var input = $('#movie').val(),
        movieName = encodeURI(input);
    $.ajax({
        type: 'GET',
        url: url + mode + input + key,
        async: false,
        jsonpCallback: 'testing',
        contentType: 'application/json',
        dataType: 'jsonp',
        success: function(json) {
            console.dir(json.results);

            for (var i = 0; i < json.results.length; i++){
            var result = json.results[i];

              $(".moviesContainer").append('<div class="movies col-md-12">'+
                '<img class="poster" src="http://image.tmdb.org/t/p/w500'+ result.poster_path +'" />'
                +'<h3>'+ result.title +'</h3>'
                +'<p><b>Overview: </b>'+ result.overview +'</p>'
                +'<p><b>Release Date: </b>'+ result.release_date +'</p>'
                +'</div>');
            }
        },
        error: function(e) {
            console.log(e.message);
        }
    });
});

从myapifilms.com api中检索数据

1 个答案: