前端获取本地数据渲染在页面上

HTML页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用jquery读取json格式文件</title>
    </head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <body>
        <div id="divframe">
            <div class="loadTitle">
                <input type="button" value="获取数据" id="btn" />
            </div>
            <div id="jsonTip"></div>
        </div>
    </body>
    <script type="application/javascript">
        //监听按钮点击事件
        $("#btn").click(function() {
            // 同文件夹下的json文件路径
            var url = "Json/data.json"
            // 申明一个XMLHttpRequest
            var request = new XMLHttpRequest();
            // 设置请求方法与路径
            request.open("get", url);
            // 不发送数据到服务器
            request.send(null);
            //XHR对象获取到返回信息后执行
            request.onload = function () {
                // 返回状态为200，即为数据获取成功
                if (request.status == 200) {
                    var data = JSON.parse(request.responseText);
                    console.log(data);
                    //获取jsonTip的div
                    var $jsontip = $("#jsonTip");
                    //存储数据的变量 
                    var strHtml = "123";
                    //清空内容 
                    $jsontip.empty();
                    //将获取到的json格式数据遍历到div中
                    $.each(data, function(infoIndex, info) {
                        strHtml += "姓名：" + info["name"] + "<br>";
                        strHtml += "性别：" + info["sex"] + "<br>";
                        strHtml += "<hr>"
                    })
                    //显示处理后的数据 
                    $jsontip.html(strHtml);
                }
            }
        })
    </script>
</html>

JSON页面

[
    {
        "name": "张三",
        "sex": "男"
    },
    {
        "name": "李四",
        "sex": "男"
    },
    {
        "name": "王五",
        "sex": "女"
    }
]

新增HTML 使用下面这个$.ajax获取使用全款更加，由于div格式能和html一样，而 json获取的数据使用this，使用方便。上面一种容易造成数据循环嵌套，因此推荐下面一款

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>
    <div class="main"></div>
</body>
<script>
    notice();
    
    function notice() {
        $.ajax("Json/data.json", {
            data: {},
            dataType: 'json',
            type: 'get',
            async: 'false',
            success: function (data) {
                var listdata = data.list;       //列表数据                         
                if (listdata.length > 0) {   //项目列表
                    var listInfo = "";
                    $.each(listdata, function () {
                        listInfo += "<div class='mui-card'>" +
                            "<div class='mui-card-content'>" +
                            "<div class='mui-card-content-inner'>" +
                            "<div>" + "<span>" + this.title +
                            "</span>" +"<p>" + this.date + "</p>" +
                            "</div>" + this.content + "</div>" + "</div>" + "</div>" + "</div>";
                    });

                    $(".main")[0].innerHTML = listInfo;
                }
            }
            //        error:function(xhr,type,errorThrown){            
            //            alert("系统繁忙，请联系管理员");
            //        }
        })
    }
</script>

</html>

JSON

 {
    "list":[
        {
            "title": "行政管理规定",
            "date": "2022-06-07 17:20",
            "content": "关于发布经济适用哦公司信息软件功能的奖励标准及办法的通知"
        },
        {
            "title": "行政管理规定",
            "date": "2022-06-07 17:20",
            "content": "关于发布经济适用哦公司信息软件功能的奖励标准及办法的通知"
        },
        {
            "title": "行政管理规定",
            "date": "2022-06-07 17:20",
            "content": "关于发布经济适用哦公司信息软件功能的奖励标准及办法的通知"
        },
        {
            "title": "行政管理规定",
            "date": "2022-06-07 17:20",
            "content": "关于发布经济适用哦公司信息软件功能的奖励标准及办法的通知"
        },
        {
            "title": "行政管理规定",
            "date": "2022-06-07 17:20",
            "content": "关于发布经济适用哦公司信息软件功能的奖励标准及办法的通知"
        }
    ]
 }