业务需求,前后端分离,前端负责进行数据的展示;折腾许久记录一个简单的DEMO以免遗忘!
代码如下:
头部文件
<meta charset="UTF-8">
<title>test</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
body部分
<body>
<p style="margin-top: 10px;margin-left: 20px;"><button type="button" class="btn btn-primary btn-lg" id="myclick">API测试</button></p>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h3>获取信息展示/h3>
</div>
<div class="ibox-content">
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" id="table01">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
JS代码
<script>
$(function() {
$("#myclick").click(function() {
//$("#table01").empty();
$.ajax({
type: "get",
url: "http://192.168.0.56:50081/waipo/getAlarm",
datatype: 'jsonp',
success: function(data) {
//var item=JSON.stringify(results);//将json转换为字符串
//var attr=JSON.parse(item);//将字符串转换为json
console.log("数据对象:" + data);
console.log(data.body.results); //取出具体的数据,console网页调试中展示
var attr = data.body.results;
var len = attr.length;
//alert(len);
$.each(attr, function(index, item) {//循环变量数据,index表示的是角标,item表示的是attr数组
var tr;
var btn="<button class='btn01'>点击这里播放</button>";
tr = '<td>' + item.id + '</td>' + '<td>' + item.path + '</td>' + '<td>' + item.file + '</td>' + '<td>' + item.channel + '</td>' + '<td>' + item.level + '</td>' +
'<td>' + item.time + '</td>' + '<td>' + item.timestamp + '</td>' + '<td>' + item.netpath + '</td>'+ '<td>' + btn + '</td>';
//取出数据拼接标签
$("#table01").append('<tr>' + tr + '</tr>');//将创建好的td挂载到table下
})
}
});
});
$(".btn01").click(function(){
alert("...");
})
});
</script>
