如何在html中插入本地json文件
Posted
技术标签:
【中文标题】如何在html中插入本地json文件【英文标题】：How to insert local json file in html 【发布时间】：2020-03-02 05:17:39 【问题描述】：您好，在下面的代码中，我想手动加载本地 JSON 文件而不是数据，我希望我的代码从文件中读取所有数据并显示在 html 表中。我的 JSON 文件放在 src/main/resources/json/movies.json 中。在代码中而不是编写 JSON 数组，如 var movies= []...我想推送一个本地 JSON 文件。
<!DOCTYPE html>
<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
th, td, p, input
font:14px Verdana;
table, th, td
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
th
font-weight:bold;
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
</body>
<script>
function CreateTableFromJSON()
var movies = [
"title":"The Shawshank Redemption",
"imdb-id":"tt0111161",
"rank":"1",
"rating":"9.216891492644972",
"rating-count":"2025250"
]
// EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < movies.length; i++)
for (var key in movies[i])
if (col.indexOf(key) === -1)
col.push(key);
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < movies.length; i++)
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = movies[i][col[j]];
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
</script>
</html>
【问题讨论】：
使用 AJAX 抓取文件数据并将其加载到movies 对象中，如下所示：***.com/questions/14388452/…
请澄清您所说的“本地”是什么意思。在我看来，这意味着 Web 浏览器或客户端本地而不是服务器上。如果它在服务器上，您需要执行 HTTP GET 以将 JSON 数据读入 javascript，然后您可以从该数据构建 HTML 表。如果您指的是本地文件，例如用户计算机上的文件，则必须通过文件输入访问它。
【参考方案1】：
假设src/main/resources/json/movies.json 是一个服务器端文档，下面的例子应该对你有所帮助：
var testData = [
"title": "The Shawshank Redemption",
"imdb-id": "tt0111161",
"rank": "1",
"rating": "9.216891492644972",
"rating-count": "2025250"
];
$(function()
function createTableFromJSON(jData)
// Find Column Headers
var col = [];
$.each(jData[0], function(key, val)
col.push(key);
);
// Create Table via jQuery Object
var table = $("<table>",
class: "data-table"
);
// Append Header Row
table.append($("<tr>",
class: "data-table-header-row"
));
// Populate Header Cells
$.each(col, function(k, h)
var th = $("<th>").html(h).appendTo($("tr:eq(0)", table));
);
// Append new Rows and Populate Cells
$.each(jData, function(i, r)
var tr = $("<tr>",
class: "data-table-row"
).appendTo(table);
$.each(r, function(j, c)
$("<td>").html(c).appendTo(tr);
);
);
// Return Table jQuery Object
return table;
// Bind Click Callback to Button
$("#create-table").click(function()
/*
$.getJSON('./src/main/resources/json/movies.json', function(response)
$("#showData").html(createTableFromJSON(response));
);
*/
$("#showData").html(createTableFromJSON(testData));
);
);th,
td,
p,
input
font: 14px Verdana;
table,
th,
td
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
th
font-weight: bold;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="create-table" type="button" value="Create Table From JSON" />
<p id="showData"></p>我使用testData 进行测试。在 cmets 中，您将看到：
$.getJSON('./src/main/resources/json/movies.json', function(response)
$("#showData").html(createTableFromJSON(response));
);
这将获取 JSON 数据并将 JSON 读入变量响应。您可以将其直接输入到您的函数中，并通过.html() 将其推送到文档中。
【讨论】：
【参考方案2】：检查post它有一些重要的信息来实现你想要的。在高层次上，现代浏览器不允许您在没有用户干预的情况下访问本地文件，因此您不能在 html 标记中包含 json 文件。 是的，您可以包含 javascript 文件，但不能包含扩展名为 json 的文件。 现在回到最初的问题，有多种方法可以在服务器上设置 json 文件，然后可以使用 ajax GET 调用获取 JSON 文件。就像您可以在互联网上的许多地方托管文件一样-
-
http://myjson.com
https://jsonbin.io/
github 页面
【讨论】：
以上是关于如何在html中插入本地json文件的主要内容，如果未能解决你的问题，请参考以下文章