从Console.log获取信息并将其显示在div中

时间:2014-04-01 14:22:04

标签: css json html each

目前我被卡住了我想使用themoviedb api返回标题,情节和海报我不知道如何开始编码

目前,当我运行搜索时,信息显示在浏览器的控制台日志中我想要获取该信息并将其设置为表格格式没有任何花哨只是标题和海报需要帮助没有线索从哪里开始

doc site here http://docs.themoviedb.apiary.io/#get-%2F3%2Fsearch%2Fmovie

<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie',
    input,
    movieName,
    key = '?api_key=My API KEY HERE';

    $('button').click(function() {
        var input = $('#movie').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName ,
            dataType: 'jsonp',
            success: function(data) {
             console.log(data);

            }
        });
    });
});
</script>
</head>
<body>
<input id="movie" type="text" /><button>Search</button>
</body>
</html>

输出看起来像这样,它在追逐300中返回电影标题下的对象 enter image description here

运行每个文件时出现

错误

enter image description here

2 个答案:

答案 0 :(得分:2)

这样的事情:

 $.ajax({
    url: url + mode + key + '&query='+movieName ,
    dataType: 'jsonp',
    success: function(data) {
        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td>' + value.original_title + '</td><td>' + value.release_date + '</td></tr>';
        });
            table += '</table>';
        $('.myelement').html(table);
    }
});

答案 1 :(得分:0)

您没有从控制台读取。它只是用于输出调试信息。 AJAX调用基本上返回一个JavaScript对象(您可以在控制台中看到它的结构)。

从其他任何JavaScript对象访问数据(如果您需要了解如何,请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)并使用它。

编辑:如果您需要知道如何在网页上显示数据,您需要了解DOM。例如,请参阅:http://www.elated.com/articles/javascript-dom-intro/