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

时间:2017-01-04 12:43:42

标签: javascript html json parsing html-table

我正在使用查询,我以JSON格式加载数据,没有问题,如代码段所示:

$(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>

但是当我尝试PARSE来自JSON的{​​{1}}文件时,它会返回null:

URL
		$.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>

但它返回null。我认为第二个版本很接近。我无法弄清楚出了什么问题。我正在使用PARSE功能,它应该工作正常。我错过了什么吗?

我也发现这有效: LINK 但它会生成$(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); } }); 。我想控制加载什么。

3 个答案:

答案 0 :(得分: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);
         });
       });

我还应该提一下,由于使用https,JSFiddle对您的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可在任何类型的服务器上启用它。

答案 1 :(得分:1)

您必须配置为允许访问&#34; Access-Control-Allow-Origin&#34;在谷歌搜索

答案 2 :(得分:0)

尝试这样的事情。

(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);
        });
     });
})();