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

Question

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

script.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

使用键检索特定值并显示它。对象具有键和值。执行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>

​

Answer 2

要将JSON数据输出到浏览器，需要修改页面的HTML。

首先，将几个元素添加到index.php中，如下所示：

index.php

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

<h1>Movie info:</h1>
<p>Movie title: <span id="movie-title"></span> </p>
<p>Movie budget: <span id="movie-budget"></span> </p>

然后，在您在jQuery ajax请求中定义的成功回调中，您可以抓取span元素并使用jQuery的text函数替换它们的文本，如下所示：

$(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) {

                // grab the span elements by ID and replace their text with the json text

                $("#movie-title").text(json.title);
                $("#movie-budget").text(json.budget);

                console.dir(json);
            },

            error: function(e) {
                console.log(e.message);
            }
        });
    });
});