我正在使用查询,我以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);
}
});
。我想控制加载什么。
答案 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);
});
});
})();