从 JS 中的 URL 解析 JSON 文件返回 null

Question

我正在使用一个查询，其中我以 JSON 格式加载数据，没有问题，如 sn-p 所示：

$(document).ready(function () {
		
        var json = [{"id":1,"first_name":"Debra","last_name":"Rodriguez","email":"drodriguez0@admin.ch","gender":"Female","ip_address":"90.22.159.108"},
{"id":2,"first_name":"Julie","last_name":"Lynch","email":"jlynch1@tumblr.com","gender":"Female","ip_address":"54.182.62.180"},
{"id":3,"first_name":"Norma","last_name":"Washington","email":"nwashington2@theatlantic.com","gender":"Female","ip_address":"70.163.106.64"},
{"id":4,"first_name":"Bobby","last_name":"Castillo","email":"bcastillo3@nbcnews.com","gender":"Male","ip_address":"91.202.59.171"},
{"id":5,"first_name":"Henry","last_name":"Chavez","email":"hchavez4@chronoengine.com","gender":"Male","ip_address":"32.237.37.185"},
{"id":6,"first_name":"Sara","last_name":"Howard","email":"showard5@stumbleupon.com","gender":"Female","ip_address":"17.217.42.49"},
{"id":7,"first_name":"Jason","last_name":"Powell","email":"jpowell6@telegraph.co.uk","gender":"Male","ip_address":"14.81.195.117"},
{"id":8,"first_name":"Sean","last_name":"Burns","email":"sburns7@hp.com","gender":"Male","ip_address":"213.164.85.212"},
{"id":9,"first_name":"Jacqueline","last_name":"Gordon","email":"jgordon8@bloglines.com","gender":"Female","ip_address":"18.251.62.55"},
{"id":10,"first_name":"Russell","last_name":"Richards","email":"rrichards9@com.com","gender":"Male","ip_address":"27.226.59.80"},
{"id":11,"first_name":"Albert","last_name":"Perkins","email":"aperkinsa@hc360.com","gender":"Male","ip_address":"243.122.251.248"},
{"id":12,"first_name":"Michael","last_name":"Willis","email":"mwillisb@deviantart.com","gender":"Male","ip_address":"252.197.211.230"},
{"id":13,"first_name":"Joan","last_name":"Hamilton","email":"jhamiltonc@weebly.com","gender":"Female","ip_address":"204.70.110.117"},
{"id":14,"first_name":"Eric","last_name":"Garcia","email":"egarciad@yahoo.co.jp","gender":"Male","ip_address":"178.221.216.3"},
{"id":15,"first_name":"Frank","last_name":"Olson","email":"folsone@amazon.co.uk","gender":"Male","ip_address":"245.25.170.33"},
{"id":16,"first_name":"Kelly","last_name":"Fuller","email":"kfullerf@tripod.com","gender":"Female","ip_address":"199.209.173.51"},
{"id":17,"first_name":"Frank","last_name":"Cook","email":"fcookg@google.com","gender":"Male","ip_address":"58.30.243.1"},
{"id":18,"first_name":"Alan","last_name":"Rice","email":"ariceh@sciencedirect.com","gender":"Male","ip_address":"44.231.199.117"},
{"id":19,"first_name":"Mark","last_name":"Greene","email":"mgreenei@paypal.com","gender":"Male","ip_address":"45.34.44.2"},
{"id":20,"first_name":"Charles","last_name":"King","email":"ckingj@clickbank.net","gender":"Male","ip_address":"237.30.205.186"}];
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].id + "</td>");
            tr.append("<td>" + json[i].first_name + "</td>");
            tr.append("<td>" + json[i].last_name + "</td>");
			tr.append("<td>" + json[i].email + "</td>");
            $('table').append(tr);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>ID</th>
        <th>FIRST NAME</th>
        <th>LAST NAME</th>
		<th>EMAIL</th>
    </tr>
</table>

但是当我尝试从URL 中PARSE JSON 文件时，它返回null：

		$.getJSON('http://apolosiskos.co.uk/TEB/MOCK_DATA.json', function(json) {
			var tr;
			for (var i = 0; i < json.length; i++) {
				tr = $('<tr/>');
				tr.append("<td>" + json[i].id + "</td>");
				tr.append("<td>" + json[i].first_name + "</td>");
				tr.append("<td>" + json[i].last_name + "</td>");
				tr.append("<td>" + json[i].email + "</td>");
				$('table').append(tr);
			}
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>ID</th>
        <th>FIRST NAME</th>
        <th>LAST NAME</th>
		<th>EMAIL</th>
    </tr>
</table>

我什至尝试过：

$(document).ready(function () {
    var json = JSON.parse(Get('http://apolosiskos.co.uk/TEB/MOCK_DATA.json'));
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].id + "</td>");
        tr.append("<td>" + json[i].first_name + "</td>");
        tr.append("<td>" + json[i].last_name + "</td>");
        tr.append("<td>" + json[i].email + "</td>");
        $('table').append(tr);
    }
});

但它返回空值。我认为第二个版本很接近。我不知道出了什么问题。我正在使用 PARSE 函数，它应该可以正常工作。我错过了什么吗？

我还发现这个可行： LINK 但它会生成td。我想控制要加载的内容。

Answer 1

你可以使用JQuery函数$.getJSON：

$.getJSON(
     'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
     function(data){
         var tr;
         $.each (data, function (key, val) {
            tr = $('<tr/>');
            tr.append("<td>" + val.id + "</td>");
            tr.append("<td>" + val.first_name + "</td>");
            tr.append("<td>" + val.last_name + "</td>");
            tr.append("<td>" + val.email + "</td>");
            $('table').append(tr);
         });
       });

我还应该提到，JSFiddle 由于使用 https，所以您的 URL 存在一些安全问题。

Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://apolosiskos.co.uk/TEB/MOCK_DATA.json'. This request has been blocked; the content must be served over HTTPS.

如果你想使用 https，你应该设置 'Access-Control-Allow-Origin' 标题：

XMLHttpRequest cannot load https://apolosiskos.co.uk/TEB/MOCK_DATA.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://null.jsbin.com' is therefore not allowed access.

这是服务器站点设置，这里是 link 以在任何类型的服务器上启用它。

Answer 2

您必须进行配置以允许访问谷歌中的“Access-Control-Allow-Origin”搜索

Answer 3

尝试这样的事情。

(function() {
    var flickerAPI = "http://apolosiskos.co.uk/TEB/MOCK_DATA.json";
     $.getJSON( flickerAPI, {
       tags: "mount rainier",
       tagmode: "any",
       format: "json"
     })
     .done(function( data ) {
        $.each( data.items, function( i, item ) {
            tr = $('<tr/>');
            tr.append("<td>" + item.id + "</td>");
            tr.append("<td>" + item.first_name + "</td>");
            tr.append("<td>" + item.last_name+ "</td>");
            tr.append("<td>" + item.email + "</td>");
            $('table').append(tr);
        });
     });
})();