尽管在 chrome 控制台中正确显示，但我的 JSON 对象返回为未定义？

Question

我正在从维基百科获取一篇随机文章，我可以在 Chrome 控制台中看到该对象作为输出，但在网页上，它只是显示未定义。 我已经尝试过 stringify 以及将对象中的元素显示为 [2][0][0][3] 但它们都不起作用。他们都说 print 'undefined' 作为输出，而不是对象中包含的随机 wiki 页面的标题或内容或 url。

脚本代码：

$(function() {
  $("#random").on("click", function() {
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=random&grnnamespace=0&prop=revisions&rvprop=content&grnlimit=1&callback=?';
    $.ajax({
        url: url,
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function(data, status, jqXHR) {
          console.log(data);
          $('#result').html();
          $('#result').prepend("<div><div class='result-head'>" + JSON.stringify(data[2]) + "</div></div>");

          //stringify(data[2][0][0])
        }
      })
      .done(function() {
        console.log("success");
      })
      .fail(function() {
        console.log("fail");
      })
      .always(function() {
        console.log("always success");
      })
      //
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="random">Random</button>
<div id="result"></div>

Answer 1

如果您只想从 Ajax 响应中获取内容正文，您可以尝试以下操作：

$(function() {
  $("#random").on("click",function() {
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=random&grnnamespace=0&prop=revisions&rvprop=content&grnlimit=1&callback=?';
    $.ajax({
      url: url,
      type: 'GET',
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(data, status, jqXHR) {
        var pageId = Object.keys(data.query.pages)[0] || false;
        if (pageId){
          var articleContent =  data.query.pages[pageId].revisions[0]['*'];
          $('#result').html();
          $('#result').prepend("<div><div class='result-head'>"+articleContent+"</div></div>");
        }
       }}
    )
    .done(function() {
      console.log("success");
    })
    .fail(function() {
      console.log("fail");
    })
    .always(function() {
      console.log("always success");
    })
    //
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="random">Get Random</button>
<div id="result"></div>

Answer 2

这是一个有效的方法。令人困惑的关卡就是：

$(function() {
  $("#random").on("click",function() {
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=random&grnnamespace=0&prop=revisions&rvprop=content&grnlimit=1&callback=?';
    $.ajax({
      url: url,
      type: 'GET',
      dataType: "json",
      success: function(data, status, jqXHR) {
      console.log(data);
        $('#result').html();
        var pageTitle = JSON.stringify(data.query.pages[Object.keys(data.query.pages)[0]].title);
        var pageContent = data.query.pages[Object.keys(data.query.pages)[0]].revisions;
        var pageCon = pageContent[Object.keys(pageContent)[0]];
        var pageC = pageCon["*"];

        //data.query.pages[Object.keys(data.query.pages)[0]];

        $('#result').prepend("<div><div class='result-head'>"+pageC+"</div></div>");

        $('#result').prepend("<div><h2>"+pageTitle+"</h2></div>"); 


        //stringify(data[2][0][0])
        }}
    )
    .done(function() {
      console.log("success");
    })
    .fail(function() {
      console.log("fail");
    })
    .always(function() {
      console.log("always success");
    })
    //
  })
})