<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>告警列表</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <style> </style> </head> <body> <div class="potarea"> </div> </body> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $.ajax({ url: "data.json", //json文件位置 type: "GET", dataType: "json", //返回数据格式为json success: function(data) { alert(JSON.stringify(data)); var html = ""; $.each(data, function(i, item) { html += ' <div class="pointarea">'; html += ' <span>' + item.alarmtype + '</span>'; html += ' <span class="editpoint">修改</span>'; html += ' <span class="editdelete">删除</span></div>'; }); $(".potarea").append(html); } }) }) </script> </html>
data.json
[ { "alarmtype": "厂区南门" }, { "alarmtype": "巡更点一" }, { "alarmtype": "巡更点二" }, { "alarmtype": "巡更点1" } ]
