jQuery练习t325,从0到1

info.json 

[
  {
    "name": "tom",
    "sex" : "男",
    "age" : 24
  },
  {
    "name" : "Jerry",
    "sex" : "男",
    "age" : 25
  },
  {
    "name": "John",
    "sex" : "女",
    "age": 23
  }
]

t325.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.5.1.js"></script>
    <script>
        //getJson方法

        $(function () {
            $("#btn1").click(function () {
                $.getJSON("info.json",function (data) {
                   var str = "";
                   $.each(data,function (index, value) {
                      str += "姓名:" + value["name"] + "<br>";
                      str += "性别:" + value["sex"] + "<br>";
                      str += "年龄:" + value["age"] + "<br>";
                      str += "<hr>";
                   });
                   $("div").html(str);
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" value="获取数据">
    <div></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/modern358/article/details/113842814