javascript - 如何在浏览器中打印json console.log数据？

Question

我正在尝试使用 javascript 在浏览器中输出 Json 数据，但我只能在 console.log 中输出，我不知道要搜索什么。我是 javascript 的初学者，请在这里帮助我。

脚本.js

$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
        mode = 'movie/',
        movie_id,
        key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

    $('button').click(function() {
        var input = $('#movie').val(),
            movie_id = encodeURI(input);
        $.ajax({
            type: 'GET',
            url: url + mode + movie_id + key,
            async: false,
            jsonpCallback: 'testing',
            contentType: 'application/json',
            dataType: 'jsonp',
            success: function(json) {
                console.dir(json);
            },
            error: function(e) {
                console.log(e.message);
            }
        });
    });
});

index.php

<input id="movie" type="text" /><button>Search</button>

这段代码输出console.log中的所有数据，但我想做的是它应该在浏览器中显示数据，并且我想输出一些特定的对象，例如电影标题、概述和图像。

Answer 1

使用 key 检索特定值并显示它。该对象具有键和值。执行 object.key 将给出 value

$(document).ready(function() {
  var url = 'https://api.themoviedb.org/3/',
    mode = 'movie/',
    movie_id,
    key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

  $('button').click(function() {
    var input = $('#movie').val(),
      movie_id = encodeURI(input);
    $.ajax({
      type: 'GET',
      url: url + mode + movie_id + key,
      async: false,
      jsonpCallback: 'testing',
      contentType: 'application/json',
      dataType: 'jsonp',
      success: function(json) {
        $("#title").text(json.title);
        //$("#movTitle").prop('src'); // add image path here
        $("#overview").text(json.overview) //overview is a key
      },
      error: function(e) {
        console.log(e.message);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="movie" type="text" /><button>Search</button>
<!-- Search This: 346364 -->
<div id="title">
</div>
<div>
  <img id="movTitle" src="" alt="">
</div>
<div id="overview">

</div>