html<script>读取json无法显示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='th0'></div>
<script>
    var json = require('./json/all_inf.json');
    document.getElementById('th0').innerHTML = json[0];
</script>
</body>
</html>

打开后什么都没有,但是单独写js文件的时候是有内容的。

var json = require('./json/all_inf.json');
var a = json[0];
console.log(a);

求解答

有两种方案
1.通过 ajax请求json模式

fetch('./json/all_inf.json').then(res => {
    return res.json()
}).then(data => {
    console.log(data)
})

2.把json转入对象引入就可以用了
all_inf.js

let  json={}

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='th0'></div>
<script src='./json/all_inf.js'>
<script>

    document.getElementById('th0').innerHTML = json[0];
</script>
</body>
</html>

require语句不能用在html网页中，亲

浏览器不能直接使用require，require要在nodejs里面使用，浏览器要获取json数据得去请求http

fetch('./json/all_inf.json').then(res => {
    return res.text()
}).then(data => {
    var a =data ;
    console.log(a);
})