我有一个JSON文件,我试图从中提取Key和Values,但是这个函数不会成功。 ' datafile.json'在完全相同的目录中。警报(网络链接)从不运行,但警报('测试1')工作正常。
<div class="container">
<table class="table table-bordered table-striped table-hover" align="center">
<col width="50%">
<col>
<col width="15%">
<col width="25%">
<thead>
<tr bgcolor="#76767a" align="right">
<th align="left">Skill</th>
<th>Rank</th>
<th>Level</th>
<th>Experience</th>
</tr>
</thead>
</table>
</div>
<script>
var weblink = 'datafile.json';
var data = {};
$(document).ready(function(){
alert('test 1');
$.ajax({
type : 'GET',
dataType : 'json',
url : weblink,
success: function(data){
alert(weblink);
$.each(datas, function(key, val){
items.push("<tr>");
items.push("<td id =''"+key+"''>"+val.skill+"</td>");
items.push("<td id =''"+key+"''>"+val.rank+"</td>");
items.push("<td id =''"+key+"''>"+val.level+"</td>");
items.push("<td id =''"+key+"''>"+val.exp+"</td>");
items.push("</tr>");
});
$("<tbody/>", {"class": "mydata", html: items.join("")}).appendTo("table");
}
});
});
</script>
我的datafile.json是:
[
{
"Skill": "Overall",
"Rank": "1132673",
"Level": "420",
"Exp": "466345"
},
{
"Skill": "Attack",
"Rank": "1256428",
"Level": "23",
"Exp": "6563"
},
{
"Skill": "Defence",
"Rank": "1182611",
"Level": "28",
"Exp": "11069"
},
{
"Skill": "Strength",
"Rank": "1250418",
"Level": "22",
"Exp": "6238"
},
{
"Skill": "Constitution",
"Rank": "1292788",
"Level": "27",
"Exp": "10413"
},
{
"Skill": "Ranged",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Prayer",
"Rank": "1116462",
"Level": "20",
"Exp": "4611"
},
{
"Skill": "Magic",
"Rank": "1058028",
"Level": "32",
"Exp": "18183"
},
{
"Skill": "Cooking",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Woodcutting",
"Rank": "955909",
"Level": "47",
"Exp": "79651"
},
{
"Skill": "Fletching",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Fishing",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Firemaking",
"Rank": "668820",
"Level": "58",
"Exp": "245606"
},
{
"Skill": "Crafting",
"Rank": "1060629",
"Level": "16",
"Exp": "3090"
},
{
"Skill": "Smithing",
"Rank": "956265",
"Level": "35",
"Exp": "24400"
},
{
"Skill": "Mining",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Herblore",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Agility",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Thieving",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Slayer",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Farming",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Runecrafting",
"Rank": "619807",
"Level": "42",
"Exp": "49314"
},
{
"Skill": "Hunter",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Construction",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Summoning",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Dungeoneering",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Divination",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Invention",
"Rank": "0",
"Level": "1",
"Exp": "0"
}
]
答案 0 :(得分:0)
您可以使用脚本标记加载json文件。可选择为其提供.js扩展名。你必须将它分配给一个变量,它将被视为javascript,但也许这对你有用。
<script type="text/javascript" language="javascript" src="datafile.json"></script>
<div class="container">
<table class="table table-bordered table-striped table-hover" align="center">
<col width="50%">
<col>
<col width="15%">
<col width="25%">
<thead>
<tr bgcolor="#76767a" align="right">
<th align="left">Skill</th>
<th>Rank</th>
<th>Level</th>
<th>Experience</th>
</tr>
</thead>
</table>
</div>
<script>
// var data is defined in the json script
$(window).load(function(){
$.each(data, function(skill) {
items.push("<tr>");
$.each(skill, function(key, val){
items.push("<td id =''"+key+"''>"+val.skill+"</td>");
items.push("<td id =''"+key+"''>"+val.rank+"</td>");
items.push("<td id =''"+key+"''>"+val.level+"</td>");
items.push("<td id =''"+key+"''>"+val.exp+"</td>");
});
items.push("</tr>");
})
$("<tbody/>", {"class": "mydata", html: items.join("")}).appendTo("table");
});
</script>
<强> datafile.json 强>
var data =
[
{
"Skill": "Overall",
"Rank": "1132673",
"Level": "420",
"Exp": "466345"
},
{
"Skill": "Attack",
"Rank": "1256428",
"Level": "23",
"Exp": "6563"
},
{
"Skill": "Defence",
"Rank": "1182611",
"Level": "28",
"Exp": "11069"
},
{
"Skill": "Strength",
"Rank": "1250418",
"Level": "22",
"Exp": "6238"
},
{
"Skill": "Constitution",
"Rank": "1292788",
"Level": "27",
"Exp": "10413"
},
{
"Skill": "Ranged",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Prayer",
"Rank": "1116462",
"Level": "20",
"Exp": "4611"
},
{
"Skill": "Magic",
"Rank": "1058028",
"Level": "32",
"Exp": "18183"
},
{
"Skill": "Cooking",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Woodcutting",
"Rank": "955909",
"Level": "47",
"Exp": "79651"
},
{
"Skill": "Fletching",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Fishing",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Firemaking",
"Rank": "668820",
"Level": "58",
"Exp": "245606"
},
{
"Skill": "Crafting",
"Rank": "1060629",
"Level": "16",
"Exp": "3090"
},
{
"Skill": "Smithing",
"Rank": "956265",
"Level": "35",
"Exp": "24400"
},
{
"Skill": "Mining",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Herblore",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Agility",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Thieving",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Slayer",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Farming",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Runecrafting",
"Rank": "619807",
"Level": "42",
"Exp": "49314"
},
{
"Skill": "Hunter",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Construction",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Summoning",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Dungeoneering",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Divination",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Invention",
"Rank": "0",
"Level": "1",
"Exp": "0"
}
];