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＆＃39; text函数来获取span元素并替换它们的文本，如下所示：

$(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);
            }
        });
    });
});

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

2 个答案: