ajax 读取本地json数据

3,870 阅读1分钟

(以下链接作为参考)

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>



执行效果: