2013-03-28 135 views
0

嘿我是個初學者,當談到新時代的HTML代碼(我認爲JSON和JavaScript代碼的新時代,因爲我學到了只是直的html代碼)。那麼什麼IM做的是試圖從我以.json文件中獲取的所有數據,並把一個表,但它口口聲聲說我不能加載資源和它說,以.json文件。無法加載JSON資源 - 需要幫助

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" charset="text">  </meta> 
    <title> - Jason Onto HTML Displayed</title> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#DisplyEmp").click(function() { 
      $.getJSON("Localhost/Homework_1_second_attempt.json", function(data) { 
       for(emp in data.albums) { 
        console.log(data.albums[emp]); 
        var newRow = "<tr>"+ 
            "<td>"+data.albums[emp].title+"</td>"+ 
            "<td>"+data.albums[emp].artist+"</td>"+ 
            "<td>"+data.albums[emp].songs+"</td>"+ 
           "</tr>"; 
        $("#EmpNewTable").append(newRow); 
       } 
      }); 
     }); 
    }); 
</script> 


</head> 
<body> 
<table id="EmpNewTable" border="2"> 
<tr> 
    <th>Artist</th> 
    <th>Title</th> 
    <th>Songs</th> 
</tr> 
</table><br /><br /> 
<input type="button" id="DisplyEmp" value="Display" /> 

</body></html> 

謝謝大家幫助我與我的問題

+0

有什麼錯誤? – 2013-03-28 04:15:14

+0

您提供給URL'.getJSON'必須是有效的。目前你所擁有的東西根本行不通。嘗試類似'.getJSON('Homework_1_second_attempt.json',function(...'。這假定您正在運行服務器,並且JSON文件與調用頁面位於相同的相對位置。 – Perception 2013-03-28 04:15:19

+0

檢查您的瀏覽器控制檯看看它是否給出了一個相同的源策略違規錯誤 – 2013-03-28 04:18:39

回答

0

到由於安全問題,瀏覽器不會讓你從曾經比你自己以外的任何域中加載資源。這包括file:///「協議」。

爲此,您需要運行服務器。從外觀上來看,也許你在http://localhost運行此。然後改變你的AJAX網址

$.getJSON("/Homework_1_second_attempt.json... 

的相對路徑將在相同的位置,您正在查看的文件開始。

+0

試過,然後它說它不能識別GET命令 – 2013-04-01 21:06:11

+0

什麼是 – 2013-04-01 21:36:53

+0

console.log,反正我改變了「獲取jQuery代碼」的代碼 - 以及它如何表示 選項文件:/// C:/Homework_1_second_attempt.json jquery-latest.min.js:5 b.ajaxTransport.send jquery-latest.min.js:5 b.extend.ajax jquery-latest.min.js:5 b.each.b.(匿名函數)jquery-latest.min.js:5 b.extend.getJSON jquery-latest.min.js:5 (匿名函數)版本%204.0.html:12 b.event.dispatch jquery-latest.min.js:3 b.event.add.v .handle – 2013-04-03 05:49:14

-1

嘗試以下操作:

var rows = ''; 
for(emp in data.albums) { 
    rows += "<tr>"+ 
       "<td>"+emp.title+"</td>"+ 
       "<td>"+emp.artist+"</td>"+ 
       "<td>"+emp.songs+"</td>"+ 
      "</tr>"; 
} 
$("#EmpNewTable").append(rows); 
+0

我不確定你是否讀過這個問題。 – 2013-03-28 04:43:45

+0

或者,如果你知道如何爲'...在...'工作。 'emp'是*鍵*,而不是*值*。 – 2013-03-28 04:44:58