info.json
[
{
"name": "tom",
"sex" : "男",
"age" : 24
},
{
"name" : "Jerry",
"sex" : "男",
"age" : 25
},
{
"name": "John",
"sex" : "女",
"age": 23
}
]t328.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script>
//$.ajax（）方法
//替代方法$.getJSON（）
$(function () {
$("#btn1").click(function () {
$.ajax({
url:"info.json",
type:"get",
dataType:"json",
success:function (data) {
var str = "";
$.each(data,function (index, info) {
str += "姓名：" + info["name"] + "<br>";
str += "性别：" + info["sex"] + "<br>";
str += "年龄：" + info["age"] + "<br>";
str += "<hr>";
});
//
$("div").html(str);
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="获取数据">
<div></div>
</body>
</html>