目录

chen 的个人博客

VX:ZzzChChen
Phone:13403656751
Email:zxydczzs@gmail.com

X

JQuery和Vue读取静态JSON文件

一、JQuery 读取静态 JSON 文件

1、引入 JQuery

jquery.rar

1<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

2、造一个 JSON 文件,没有的可以下载我的。

orderList.rar

下载完成后放在项目中的任意目录下,我是放在了根目录下,方便演示。

微信图片 20210429112436.png

3、贴代码

1<script type="text/javascript">
2	var assetsUrl = './orderList.json';
3	$.getJSON(assetsUrl, function(res){
4		console.log(res);
5	})
6</script>

微信图片 20210429112721.png

4、补充

如果是平常键值对的 JSON 数据,可以直接“.”出来数据,如果是这样的数字类型的键,可以使用如下方法。

1<script type="text/javascript">
2	var assetsUrl = './orderList.json';
3	$.getJSON(assetsUrl, function(res){
4		console.log(res);
5		console.log(res[1]);
6	})
7</script>

微信图片 20210429112941.png

二、Vue 读取静态 JSON 文件

1、还是造一个 JSON 文件,和 JQuery 用的那个一样就行了。

image.png

2、贴代码

1onLoad() {  
2	var appData = require('../data.json');
3	console.log(appData);
4},

image.png

输出这种以数字为键的 JSON 和上方的方法一样。


标题:JQuery和Vue读取静态JSON文件
作者:zzzzchen
地址:https://dczzs.com/articles/2021/04/29/1619667277462.html