2017-04-21 36 views
1

我有一個JSON文件,我試圖從中取出Key和Values,但這個函數不會成功。 'datafile.json'在完全相同的目錄中。警報(weblink)永遠不會運行,但警報('測試1')正常工作。Ajax獲取請求將無法找到JSON文件

<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

如果你不使用HTTP服務器,您使用的是Chrome,這是不行的......解決辦法:使用HTTP服務器 –

+0

這一切位於我的服務器上。我的網頁加載正常,但無法訪問相同目錄中的JSON。 – BrandonNova

+0

Typo。數據!==數據 –

回答

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" 
} 
]; 
+0

Did not help anything。在添加此代碼之前,datafile.json甚至不會通過開發人員工具顯示在源代碼中。現在它的功能仍然沒有成功。 – BrandonNova

+0

你將不再需要ajax,你可以直接使用變量,生病編輯回答 – chris

+0

好吧。我會留意的。謝謝。 – BrandonNova