Question

嘿，我是一个初学者，当涉及到新时代的HTML代码（我认为json和javascript代码新时代，因为我只是直接的html代码学习）。那么我正在做的是尝试从我的.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>

谢谢大家帮我解决问题

Answer 1

出于安全考虑，浏览器不允许您从您自己以外的任何域加载资源。这包括file:///“协议”。

为此，您需要运行服务器。从它的外观来看，也许你在http://localhost上运行它。然后将您的ajax网址更改为

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

相对路径将从您正在查看的文件的相同位置开始。

Answer 2

尝试以下方法：

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

无法加载json资源 - 需要帮助

2 个答案:

无法加载json资源 ​​- 需要帮助

2 个答案:

无法加载json资源 - 需要帮助