数据显示在控制台中,但无法在浏览器中显示。我几乎尝试了所有浏览器,但结果相同。 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);
}
}
}
}
})();