使用Javascript从URL解析JSON

Question

我已经搭建了一个系统，可以解析JSON并使用一些简单的CSS进行渲染。但是，我使用了一个变量来实现这个功能。我不想在脚本中输出数据。相反，我想从本地或远程URL获取数据。

<script type='text/javascript'>
$(window).load(function(){
var data={"users":[
        {
            "title":"Dieter Rams Video",
            "content":"Only text will go here. Limited to 100 characters per panel.",
            "url":"http://website.me/video.php?=89697976996",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        }
]}
$(data.users).each(function() {
    var output = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
    $('#feed').append(output);
});
});
</script>

如何从URL源中获取JSON数据并像现在一样输出？

更新

<script type='text/javascript'>
    var data;
    $.ajax({
    dataType: "json",
    url: `file://${__dirname}/data.json`,
    data: data,
    success: function(data) {
         data = data;
      }
    });
    $(window).load(function(){
    $(data).each(function() {
        var output = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
        $('#feed').append(output);
    });
    });
</script>

- user5009455

Answer 1

你应该使用ajax（通常与jquery一起使用）：

var jsonResult;

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: function(data) {
       jsonResult = data;
    }
});

Reference: https://api.jquery.com/jquery.ajax/

- paolobasso

---

我能以某种方式引用它吗？就像一个变量一样。我问这个问题是因为我正在为一个 Electron 应用程序开发。 - user5009455

好的，查看更新后的答案。 - paolobasso

好的，谢谢。我已经添加了一个更新后的视图。不太确定是否正确。 - user5009455

浏览器由于安全原因无法打开本地目录，例如“file://*”。您应该开始使用本地主机服务器（在谷歌中搜索xampp或aampp或wampp）。 - paolobasso

虽然，我所拥有的应该可以在本地主机上运行？ - user5009455

浏览器无法访问本地文件，因此您需要一个本地服务器来“提供”JSON。 - paolobasso

Answer 2

你可以使用jQuery中的$.getJSON方法

参考 http://api.jquery.com/jquery.getjson/

- Marco Moretti

Answer 3

您可以使用jQuery.getJSON()方法从外部资源获取JSON数据。

请参阅文档：http://api.jquery.com/jquery.getjson/

- Wiktor Bednarz