使用纯 javascript 从 JSON Url 读取数据并在 HTML 中显示答案

【问题标题】：Read data from JSON Url using plain javascript and display it in HTML使用纯 javascript 从 JSON Url 读取数据并在 HTML 中显示
【发布时间】：2018-10-10 12:53:19
【问题描述】：

我需要使用纯 javascript 从 json 生成的 url 读取数据并在 html 中显示数据。我已经搜索了很多，但我找不到我需要的确切内容。你能给我一些启动，比如我应该做什么或任何参考资料。我真的很想自己学习和实现它。

P.S：我是 JavaScript 的初学者。

【问题讨论】：

为了澄清，您想从 URL（端点）获取数据。您要获取的数据是 JSON 格式吗？然后你想对这些数据做一些事情（解析它）并将它输出到你的 HTML（DOM）？
注意CORS，大多数网站不允许你直接从浏览器加载他们的内容，在你开始使用这个特殊的东西之前了解CORS是值得的，你会省去很多麻烦
@Alex Mulchinock 是的！没错。我知道如何生成 json url 或 api。但我不知道如何使用 javascript 获取 json 数据并以 HTML 格式显示数据。
@AnkitaRoy jQuery 有一个函数（方法）可以让你很容易地做到这一点。如果您只想使用 vanilla Javascript，那么下面 Pranav 的回答可能是一个不错的起点。如果你想看一个 jQuery 的例子，请告诉我。 Pravav 已经为您提供了其他方面的服务。

标签： javascript html json-api

【解决方案1】：

你可以使用 ES6 fetch API 来加载请求数据然后渲染它。

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

这里有一个关于 fetch API 的教程：https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data

现在所有现代浏览器都支持 Fetch：https://caniuse.com/#feat=fetch

【讨论】：