使用Javascript从URL解析JSON


Parse JSON from URL with Javascript

本问题已经有最佳答案，请猛点这里访问。

我已经整理了一个系统来解析JSON并用一些简单的CSS渲染它。 虽然，我已经使用变量完成了这项工作。 我不想在脚本中输出数据。 而是从本地或远程URL收集它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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 ="<h4>" + this.title +"</h4><p>
" + this.content +"
</p>";
    $('#feed').append(output);
});
});

我怎么能从URL源收集JSON数据并像我现在一样输出它？

更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 ="<h4>" + this.title +"</h4><p>
" + this.content +"
</p>";
        $('#feed').append(output);
    });
    });

你应该使用ajax(通常使用jquery)：

1
2
3
4
5
6
7
8
9
10
var jsonResult;

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

参考：https：//api.jquery.com/jquery.ajax/

相关讨论

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

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

使用jquery，您可以使用$ .getJSON

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