Question

我尝试连接外部.json文件并以html格式显示结果。

这是我的json

{
"jobid": "2018-1109",
"overview": "hello world",
"links": [
   {
     "rel": "self",
     "title": "hello world"
   }
]
}

我不确定如何将.json文件放入我的html文件并显示数据。任何帮助将不胜感激。我在本地服务器上对此进行了测试，因此我与该文件的连接成功。我发现的所有参考文献和例子都没有让我得到正确的答案。

我知道我可以使用$ .getJSON（）;为了引入文件，我只是混淆了一旦我在javascript中使用它，该如何处理它。

Answer 1

.getJSON()似乎是一种请求本地文件的奇怪方法。这适用于加载本地文件JSON。

＆＃13;

loadJSON(function(response) {
  // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
    $("#YourDivIid").html(JSON.stringify(actual_JSON));
 });
}

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

＆＃13;

<div id='YourDivIid'></div>

＆＃13;

对于每个单独的数据，您可以通过变量.

进行访问

var actual_JSON = JSON.parse(response);

与actual_JSON.jobid和actual_JSON.overview类似，您将获得'2018-1109'和'"hello world"'

Answer 2

利用jquery文档，我能够显示数据：

$.getJSON( "displayjob.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

读取外部.json文件并以html格式显示

2 个答案: