目录

zzzzchen 的个人博客

记录精彩的程序人生

X

JQuery和Vue读取静态JSON文件

一、JQuery读取静态JSON文件

1、引入JQuery

jquery.rar

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

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

orderList.rar

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

微信图片20210429112436.png

3、贴代码

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

微信图片20210429112721.png

4、补充

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

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

微信图片20210429112941.png

二、Vue读取静态JSON文件

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

image.png

2、贴代码

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

image.png

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


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