前端获取本地数据渲染在页面上
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": "关于发布经济适用哦公司信息软件功能的奖励标准及办法的通知"
}
]
}
