Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/471.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
尝试使用JavaScript/jQuery将来自OMDb API的JSON解析为HTML引导表_Javascript_Jquery_Html_Json_Imdb - Fatal编程技术网

尝试使用JavaScript/jQuery将来自OMDb API的JSON解析为HTML引导表

尝试使用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

我知道有很多这样的问题,但我不明白为什么这样不行。我试图从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响应是一个对象而不是数组,请用以下内容替换回调:

        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你介意分享循环的代码吗?谢谢我以前有一个循环,但那时候也不行。虽然我可能做错了。现在没关系了!非常感谢。真不敢相信我错过了这个。我知道这很简单,谢谢你!真不敢相信我错过了这个。我知道这是一件非常简单的事情。