我知道有很多这样的问题，但我不明白为什么这行不通。我试图从 OMDb API 生成的 JSON 中获取数据并将其传递到表中，但是当我加载页面时没有任何反应。
我是初学者，所以任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>IMDb Information</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script type="text/javascript">
$(document).ready(function () {
var url = "http://www.omdbapi.com/?t=2012";
$.getJSON(url,
function (json) {
var tr;
tr = $('<tr/>');
tr.append("<td><img src=" + json[i].Poster + " width='200' height='297'></td>");
tr.append("<td>" + json[i].Title + "</td>");
tr.append("<td>" + json[i].Year + "</td>");
tr.append("<td>" + json[i].Rated + "</td>");
tr.append("<td>" + json[i].Runtime + "</td>");
tr.append("<td>" + json[i].Genre + "</td>");
tr.append("<td>" + json[i].Director + "</td>");
tr.append("<td>" + json[i].Actors + "</td>");
tr.append("<td>" + json[i].Plot + "</td>");
$('#imdb').append(tr);
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Videos</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="catalogue.html">Catalogue</a></li>
<li><a href="rent.html">Rent</a></li>
<li><a href="return.html">Return</a></li>
</ul>
</div>
</div>
</nav>
<div id="content">
<h1>IMDb Information</h1>
<table class="table table-hover" id="imdb">
<thead>
<tr>
<th>Poster</th>
<th>Title</th>
<th>Year</th>
<th>Rated</th>
<th>Runtime</th>
<th>Genre</th>
<th>Director</th>
<th>Actors</th>
<th>Plot</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
JSON 文件如下所示:
{"Title":"2012","Year":"2009","Rated":"PG-13","Released":"13 Nov 2009","Runtime":"158 min","Genre":"Action, Adventure, Sci-Fi","Director":"Roland Emmerich","Writer":"Roland Emmerich, Harald Kloser","Actors":"John Cusack, Amanda Peet, Chiwetel Ejiofor, Thandie Newton","Plot":"A frustrated writer struggles to keep his family alive when a series of global catastrophes threatens to annihilate mankind.","Language":"English, French, Tibetan, Mandarin, Russian, Hindi, Portuguese, Latin, Italian","Country":"USA","Awards":"4 wins & 20 nominations.","Poster":"http://ia.media-imdb.com/images/M/MV5BMTY0MjEyODQzMF5BMl5BanBnXkFtZTcwMTczMjQ4Mg@@._V1_SX300.jpg","Metascore":"49","imdbRating":"5.8","imdbVotes":"256955","imdbID":"tt1190080","Type":"movie","Response":"True"}
最佳答案
json 响应是一个对象而不是数组，用这个替换你的回调:
var tr;
tr = $('<tr/>');
tr.append("<td><img src=" + json.Poster + " width='200' height='297'></td>");
tr.append("<td>" + json.Title + "</td>");
tr.append("<td>" + json.Year + "</td>");
tr.append("<td>" + json.Rated + "</td>");
tr.append("<td>" + json.Runtime + "</td>");
tr.append("<td>" + json.Genre + "</td>");
tr.append("<td>" + json.Director + "</td>");
tr.append("<td>" + json.Actors + "</td>");
tr.append("<td>" + json.Plot + "</td>");
$('#imdb').append(tr);
关于javascript - 尝试使用 JavaScript/jQuery 将来自 OMDb API 的 JSON 解析为 HTML Bootstrap 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32007761/