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

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

3、贴代码

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

4、补充

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

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

二、Vue 读取静态 JSON 文件

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

2、贴代码

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

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