JQuery 和 Vue 读取静态 JSON 文件

zzzzchen 的个人博客 记录精彩的程序人生 本文由博客端 https://www.dczzs.com 主动推送

一、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 和上方的方法一样。

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    227 引用 • 641 回帖 • 473 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。目前全球有 28% 的网站使用 jQuery,是目前最受欢迎的 JavaScript 库。

    62 引用 • 134 回帖 • 788 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...