Question

我正在使用Json Data用我的Html表填充详细信息列表。我在与index.html页面相同的目录中有一个名为example.json的json文件。但是当我添加＆＃34; example.json＆＃34;时，它不会显示/读取json文件。在下面的代码，但加载在线网址时工作完全正常。我想在本地存储中使用Json文件填充表格，并在网上用新数据覆盖以前的example.json数据（如果有的话）。

这是我的HTML

＆＃13;

<!DOCTYPE html>
<html>
<head>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
</head>
<body>
<div class="container">
	
<div class="table-responsive">
	<h1>Json</h1>
	<br/>

	<table class="table table-bordered table-striped" id="employee_table">
		<tr>
			<th>Class</th>
			<th>Time</th>
			
		</tr>
	</table>
</div>
</div>

</body>

</html>



<script >
	

$(document).ready(function(){
	$.getJSON("https://api.myjson.com/bins/8qktd", function(data){
	var employee_data= '';
	$.each(data, function(key, value){
		employee_data += '<tr>';
		employee_data += '<td>'+value.class+'</td>';
		employee_data += '<td>'+value.time+'</td>';
		
		employee_data += '</tr>';
	});
	$('#employee_table').append(employee_data);

      });

});
</script>

＆＃13;

一

＆＃13;

[

    {
    "id":"1",    
    "time":"10-15",
    "class":"John Smith"
    
},
{


    "id":"2",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"3",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"4",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"5",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"6",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"7",
  "time":"10-15",
    "class":"John Smith"
},
{


    "id":"8",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"9",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"10",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"11",
    "time":"10-15",
    "class":"John Smith"
},

{

    "id":"12",
    "time":"10-15",
    "class":"John Smith"
}

]

＆＃13;

任何帮助都会非常感激。我已经找到了解决方案，但没有找到。

Answer 1

您可以在HTML中嵌入JSON，例如在data-*属性中。如果navigator.onLine从服务器获取JSON修改HTML并反映更新的JSON，则使用HTML中嵌入的JSON。在此过程中的任何时候，您都可以使用与现有HTML document相同的文件名保存HTML，以更新HTML中的嵌入式data-*。

<!doctype html>
<html data-json='[{"id":"1","time":"10-15","class":"John Smith"}]'>

<head>
  <script>
    onload = () => {
      if (!navigator.onLine) {
        let json = document.documentElement.dataset.json;
        let data = JSON.parse(json);
        // do stuff with `data`
        console.log(data);
      } else {
        fetch("https://api.myjson.com/bins/8qktd")
          .then(response => response.json())
          .then(res => {
            console.log(res);
            // update HTML at at server to set `data-json` at `<html>`
            /*
            fetch("/path/to/server", {method:"POST", body:JSON.stringify(res)})
            .then(response => response.ok)
            .then(res => {
              console.log(res);
              document.documentElement.dataset.json = JSON.stringify(res);
              // download updated HTML
              const a = document.createElement("a");
              a.download = "file.html";
              a.href = URL.createObjectURL(new Blob([doucment.documentElement.outerHTML]));
              document.body.appendChild(a);
              a.click(); // download updated HTML with same file name
            })
            .catch(err => console.error(err));
            */
          });

      }
    }
  </script>
</head>

</html>

离线时从本地目录中读取Json文件，并在联机时覆盖数据

1 个答案: