当前位置: 首页 > 工具软件 > json2html > 使用案例 >

HTML/JavaScript中引入json文件

海翔宇
2023-12-01

方法一:通过<script >标签引入

第一步:在json文件中定义一个变量指向json数据(一些IDE会报错,不过不用管,另外一些IDE规则验证无法通过,导致无法保存,这种情况就用第二种方法吧)。

var jsonData = {
	// json数据
};

第二步:在HTML文件中使用<script>标签引入json文件

<script type="text/javascript" src="./xxx.json"></script>
<script>
// 控制台输出json
console.log("json文件数据", jsonData);
</script>

方法二:通过异步获取json(getJSON

  1. 要引入JQuery
  2. 要启动服务(我用的http-server),否则出现跨域报错
  3. 注意json文件不能像方法一那样写了,是纯json文件,不要赋值变量了
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.getJSON('data.json', function (data) {
    console.log("json文件数据", data);
})
</script>
 类似资料: