尝试使用JavaScript/jQuery将来自OMDb API的JSON解析为HTML引导表
我知道有很多这样的问题,但我不明白为什么这样不行。我试图从OMDb API生成的JSON中获取数据并将其传递到表中,但当我加载页面时,什么都没有发生 我是一个初学者,任何帮助都将不胜感激尝试使用JavaScript/jQuery将来自OMDb API的JSON解析为HTML引导表,javascript,jquery,html,json,imdb,Javascript,Jquery,Html,Json,Imdb,我知道有很多这样的问题,但我不明白为什么这样不行。我试图从OMDb API生成的JSON中获取数据并将其传递到表中,但当我加载页面时,什么都没有发生 我是一个初学者,任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.c
<!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响应是一个对象而不是数组,请用以下内容替换回调:
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);
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);
控制台中是否有错误?在成功回调中缺少一个循环。修复它很可能会使一切正常。@Andy我在调试窗口中没有看到除此之外的任何东西:程序“[7656]iisexpress.exe”已退出,代码为0 0x0。我正在使用Visual Studio Express进行Web@DanielB你介意分享循环的代码吗?谢谢我以前有一个循环,但那时候也不行。虽然我可能做错了。现在没关系了!控制台中是否有错误?在成功回调中缺少一个循环。修复它很可能会使一切正常。@Andy我在调试窗口中没有看到除此之外的任何东西:程序“[7656]iisexpress.exe”已退出,代码为0 0x0。我正在使用Visual Studio Express进行Web@DanielB你介意分享循环的代码吗?谢谢我以前有一个循环,但那时候也不行。虽然我可能做错了。现在没关系了!非常感谢。真不敢相信我错过了这个。我知道这很简单,谢谢你!真不敢相信我错过了这个。我知道这是一件非常简单的事情。