javascript - 使用 Javascript 从 URL 解析 JSON

Question

这个问题在这里已经有了答案:





HTTP GET request in JavaScript?

(30 个回答)


5年前关闭。




我已经建立了一个系统来解析 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>

Answer 1

您应该使用 ajax(通常使用 jquery):

var jsonResult;

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

引用:https://api.jquery.com/jquery.ajax/