版权声明:所有博客本人原创,转载注明出处即可 https://blog.csdn.net/qq_42813491/article/details/88084462
目录结构
效果图
data.json
[{
"name": "叶红鱼",
"age": "20",
"address": "西陵",
"otherName": "道痴"
},
{
"name": "莫山山",
"age": "21",
"address": "墨池苑",
"otherName": "书痴"
},
{
"name": "三师姐",
"age": "23",
"address": "书院二层楼",
"otherName": "林雾"
}
]
do.php
<?php echo file_get_contents("data.json");?>
index.htm
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>php读取本地json</title>
<style>
div {
width: 400px;
background: skyblue;
margin: 100px auto;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<div>点我发起ajax请求异步拉取json数据</div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "do.php");
xhr.onload = function() {
console.log(xhr.responseText);
}
xhr.send(null);
</script>
</body>
</html>