无法使用IMBD api在浏览器中显示结果

时间:2016-07-09 16:03:26

标签: javascript html ajax imdb

数据显示在控制台中,但无法在浏览器中显示。我几乎尝试了所有浏览器,但结果相同。 row根据搜索结果创建,但行内没有任何内容,所有行都为空。任何帮助都会很明显。

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IMDB</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="imdb.js"></script>
</head>
<body>
    <div class="container">
        <h1>Search IMDB</h1>
        <input type="text" id="movieTitle" class="form-control" placeholder="Ex: Titanic"/>
        <button id="searchMovie" class="btn btn-primary btn-block">Search Movie</button>
        <table class="table table-striped" id="results">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Rating</th>
                <th>Image</th>
            </tr>
        </thead>
        <tbody id="container">
            <tr id="template">
                <td><a href="#" class="link"></a></td>
                <td class="plot"></td>
                <td class="rating"></td>
                <td><img src="" class="poster"/></td>
            </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

imdb.js

(function(){

    $(init);

    function init(){
        $("#searchMovie").click(searchMovie);

        var movieTitle = $("#movieTitle");
        var tbody = $("#container");
        var template = $("#template").clone();

        function searchMovie(){
            var title = movieTitle.val();

            $.ajax({
                    url: "http://api.myapifilms.com/imdb/idIMDB?title="+title+"&limit=3&token=1ec543f9-d889-4865-8aab-62a2515f24e8",
                    dataType: "jsonp",
                    success: renderMoviesWithTemplate
                }
            );

            function renderMoviesWithTemplate(movies){
                console.log(movies);
                tbody.empty();
                for(var m in movies){
                    var movie = movies[m];
                    var title = movie.title;
                    var plot = movie.plot;
                    var rating = movie.rating;
                    var posterUrl = movie.urlPoster;
                    var movieUrl = movie.urlIMDB;

                    var tr = template.clone();

                    tr.find(".link")
                        .attr("href",movieUrl)
                        .html(title);

                    tr.find(".plot")
                        .html(plot);

                    tr.find(".rating")
                        .html(rating);

                    tr.find(".poster")
                        .attr("src",posterUrl);

                    tbody.append(tr);
                }
            }
        }
    }

})();

0 个答案:

没有答案