javascript/html : 解析 JSON 响应答案

【问题标题】：javascript/html : parsing JSON responsejavascript/html : 解析 JSON 响应
【发布时间】：2020-02-03 05:01:23
【问题描述】：

我正在尝试通过使用以下查询检索 JSON 响应来从 Wikipedia url 中提取摘要部分：https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro&explaintext&redirects=1&titles=Stack%20Overflow。然后我想解析这个响应并在我的网站的 html 中显示摘要。我找到了一个 JSON 解析示例，在对 JSON 中的字符串进行测试时似乎可以正常工作。我也尝试过重新循环 JSON 检索函数，但作为一个完整的新手，我显然遗漏了一些东西，因为这个查询的结果没有返回任何数据（下面在 html 编辑器中使用的结果返回空白页） - 任何人都可以建议一个更正，让我检索维基百科数据并解析它？

代码：

<html>
<body>

<p id="demo"></p>


<script>

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

resp=getJSON('https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro&explaintext&redirects=1&titles=Stack%20Overflow')


var obj = JSON.parse(resp);
obj.extract = eval("(" + obj.extract + ")");
document.getElementById("demo").innerHTML =  obj.extract; 
</script>

</body>
</html>

**预期的 JSON 响应 ** 预期的输出，“提取”后的文本

{"batchcomplete":"","query":{"pages":{"21721040":{"pageid":21721040,"ns":0,"title":"Stack Overflow","extract" ：“Stack Overflow 是一个面向专业和爱好者程序员的问答网站。它是一个私有网站，是 Stack Exchange Network 的旗舰网站，由 Jeff Atwood 和 Joel Spolsky 于 2008 年创建。它提供广泛的问答范围广泛的计算机编程主题。它的创建是为了成为早期问答网站（如 Experts-Exchange）的更开放的替代方案。该网站的名称是由 Atwood 流行的编程博客 Coding Horror 的读者于 2008 年 4 月投票选出的. 该网站作为用户提问和回答问题的平台，通过会员资格和积极参与，对问题和答案进行上下投票，并以类似于 wiki 或 Reddit 的方式编辑问题和答案。可以获得声望点和“徽章”；例如，一个人被授予 10 声望对一个问题的答案获得“赞成”投票的积分和一个问题的“赞成”投票获得 10 分，并且可以因其有价值的贡献而获得徽章，这代表了传统问答网站的游戏化.用户通过提高声誉来解锁新特权，例如投票、评论甚至编辑其他人的帖子的能力。所有用户生成的内容均在知识共享属性-相同方式共享许可下获得许可。结束问题是与 Yahoo! 的主要区别。答案和防止低质量问题的方法。 2013年对机制进行了大修；被“搁置”后编辑的问题现在出现在审查队列中。 Jeff Atwood 在 2010 年表示，重复问题不被视为问题，而是如果此类额外问题通过增加搜索引擎中的相关关键字点击量来为网站带来额外流量，则它们构成了优势。截至 2019 年 1 月，Stack Overflow 已注册超过 1000 万用户，并且在 2018 年中期超过 1600 万个问题。根据分配给问题的标签类型，网站上讨论最多的前 8 个主题是：JavaScript、Java、C#、PHP、Android、Python、jQuery 和 HTML.Stack Overflow 还有一个 Jobs 部分，可以帮助开发人员找到下一个机会。对于雇主，Stack Overflow 提供工具来宣传他们的业务，在网站上宣传他们的职位空缺，并从 Stack Overflow 的开发人员数据库中寻找候选人。\n\n"}}}}

【问题讨论】：

标签： javascript html json

【解决方案1】：

在您的代码中，getJSON 接受两个参数：url 和 callback。您提供的是第一个，但不是第二个。您需要做的是将getJSON 调用之后的代码放入回调函数中，如下所示：

var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro&explaintext&redirects=1&titles=Stack%20Overflow';

resp = getJSON(url, afterGet);

function afterGet(error, resp) {
  var obj = JSON.parse(resp);
  obj.extract = eval("(" + obj.extract + ")");
  document.getElementById("demo").innerHTML = obj.extract;
}

原因是XMLHttpRequest 是异步发生的。你调用它，但它不会在下一行代码运行时完成。所以你告诉它稍后运行代码，给它一个callback 函数。

Promise 也是延迟代码执行直到异步操作发生后的好方法。如果您想了解有关 Promises 的更多信息，可以尝试使用 fetch 而不是 XMLHttpRequest。

【讨论】：