将json从本地路径加载到所有浏览器都支持的html的方法？
将json从本地路径加载到所有浏览器都支持的html的方法？
提问于 2019-10-03 23:31:14
我正在尝试将json数据从本地路径加载到一个简单的html页面。我尝试了许多使用fetch、ajax加载数据的方法。我需要从json中读取值，并在html页面中更新该值。
我需要托管这个页面，这将被使用自己的浏览器的人。
Json_Development_Test.js
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
let request = new Request("./test.json")
fetch(request)
.then(function(resp){
return resp.json();
})
.then(function(data){
for(var i in data){
console.log(i+data[i])
document.getElementById(i).style.background = data[i]
}
})HTML
<html>
<style type="text/css">
.tableLayout {
display:table;
}
.tableLayout > div{
display:table-row;
}
.tableLayout > div > div {
display:table-cell;
border:solid;
text-align: center;
}
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
display:grid;
}
.fixed {
table-layout: fixed;
display:grid
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 26px;
padding-right: 26px;
text-align: center;
}
.Cell2
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 56px;
padding-right: 34px;
text-align: left;
}
.Cell3
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 56px;
padding-right: 35px;
text-align: center;
}
</style>
<body>
<header>
<meta http-equiv="refresh" content="30">
<h1> JSon Example </h1>
<script src ="Json_Development_Test.js">
</script>
</header>
<div class="Heading">
<div Class="Cell">
<p>Project Name</p>
</div>
<div Class="Cell">
<p>Service URL</p>
</div>
<div id="test">
<span id="headerID1" class="Cell">
<p>PDC</p>
</span>
<span id="headerID2" class="cell">
<p>DDC</p>
</span>
<span id ="Time" class="Cell">
<P> Updated Checked Time</P>
</span>
</div>
</div>
<div class="Heading">
<div Class="Cell">
<p>GRapd</p>
</div>
<div Class="Cell">
<p>abc.com</p>
</div>
<div id ="Test">
<span id="Pdata1" class="Cell2">
<p>cp</p>
</span>
<span id="Ddata1" class="Cell2">
<p>de</p>
</span>
<span id ="tdata1" class="Cell2">
<P> </P>
</span>
</div>
</div>
</div>
<div class="Heading">
<div Class="Cell">
<p>LEPRD</p>
</div>
<div Class="Cell">
<p>bcd.com</p>
</div>
<div id="test">
<span id="pdata2" class="Cell2">
<p>HTP</p>
</span>
<span id="ddata2" class="Cell2">
<p>HcP</p>
</span>
<span id ="tdata2" class="Cell2">
<P> </P>
</span>
</div>
</div>
</body>
</html>上述两种方法在某些浏览器中都能正常工作，但并不是在所有浏览器中都能正常工作。
期望:来自josn的数据应该在所有浏览器中加载。我想知道从本地文件路径加载json的最简单和最好的方法是什么。
实际:上面的java脚本没有在所有的浏览器中加载数据
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-03 23:34:41
不幸的是，并不是所有的浏览器都支持jquery api，因此您必须使用jquery api，或者可以使用jquery ajax call api，因为fetch将处理跨浏览器的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58222437
复制相关文章
相似问题
腾讯云开发者
