ajax 读取本地json数据

最新推荐文章于 2024-03-27 00:06:53 发布

weixin_34148508

最新推荐文章于 2024-03-27 00:06:53 发布

阅读量1.2k

点赞数 1

文章标签： json javascript ViewUI

原文链接：https://juejin.im/post/5b12a5e65188257d8668753c

版权

(以下链接作为参考)

jQuery ajax读取本地json文件

使用jQuery——Ajax请求本地json文件

通过jquery的ajax请求本地的json文件

正式开始

参考以上教程,我们运行phpstudy,编写一个index.html,一个json1.json

json1.json:

{
  "list":[
    {"item":"审计管理"},
    {"item":"菜单管理"},
    {"item":"订单管理"},
    {"item":"合同管理"},
    {"item":"物流管理"},
    {"item":"行政管理"},
    {"item":"人事管理"},
    {"item":"购物管理"},
    {"item":"批发管理"},
    {"item":"安全管理"},
    {"item":"账号管理"},
    {"item":"财务管理"},
    {"item":"其他管理"}
  ]
}复制代码

index.html:

<body>
		<button id="btn1">点击</button>
		<p>点击后console.log数据</p>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('#btn1').click(function() {
					console.log('你点击了按钮,将会请求数据回来');
					$.ajax({
						type: "GET", //GET还是POST,不是必须
						url: "json1.json",
						//dataType: "json",//要求服务端返回的数据类型,不是必须
						//async: true,//同步还是异步,不是必须
						success: function(data) {
							console.log(data);
                                                        console.log(data.list[0]);
						}
					});
				});
			});
		</script>
	</body>复制代码

执行效果:

weixin_34148508

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
ajax 读取本地json数据

(以下链接作为参考)jQuery ajax读取本地json文件使用jQuery——Ajax请求本地json文件通过jquery的ajax请求本地的json文件正式开始参考以上教程,我们运行phpstudy,编写一个index.html,一个json1.jsonjson1.json:{ "list":[ {"item":"审计管理"}, {"item":"菜单管理"}, ...
复制链接

扫一扫