如何在浏览器中打印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请求定义你的成功回调，你可以通过使用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); 
      } 
     }); 
    }); 
});