Ajax using jQuery package and get data from http api to render the page, write the front page with a bootstrap
Preview
Technology stack
- html + javaScript + css
- bootstrap 4.0.0
- jQuery 3.2.1
- Ajax
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bnst</title>
<link rel="stylesheet" type="text/css" href="index.css" >
</head>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<!-- Logo -->
<a href="#" class="navbar-brand">
<img src="imge/bnicon.png" alt="logo">Ship Platform
</a>
<!-- 定义折叠按钮 -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 把菜单包含在容器内 <--></-->
<div class="collapse navbar-collapse" id="nav-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><img src="imge/callme.png" alt="user">Call me</a></li>
<li class="nav-item"><a href="#" class="nav-link"><img src="imge/device.png" alt="user">mydrvice</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled"><img src="imge/user.png" alt="user">user</a></li>
</ul>
</div>
</nav>
<div class="device">
<p class="col-xd-12"><span id="user1"></span></p>
<p class="col-xd-12"><span id="user2"></span></p>
<p class="col-xd-12"><span id="user3"></span></p>
大专栏 传感器数据平台的开发1th <p class="col-xd-12"><span id="data1"></span></p>
<p class="col-xd-12"><span id="data2"></span></p>
<p class="col-xd-12"><span id="data3"></span></p>
<p class="col-xd-12"><span id="data4"></span></p>
</div>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script type="text/javascript">
// 访问api，数据插入到reslut中
//jquery function
$(function(){
$.ajax({
//请求方式
type : "GET",
//修改为同步
async: false,
//请求的媒体类型
contentType: "application/jsonp;charset=UTF-8",
//请求地址
url : 'http://www.szbnst.com:8080/api/getTlinkData/NU3W3550GLMZUE68',
//请求成功
success : function(result) {
console.log(result);
//首先将数据全部保存起来
var dataObj = JSON.parse(result);
// $('#user1').text('查询状态: '+dataObj.msg);
$('#user2').text('id: '+dataObj.deviceId);
$('#user3').text('Name: '+dataObj.deviceName);
//定义一个switch
$('#data1').text('deviceName: '+dataObj.sensorLastDataList[0].sensorName);
$('#data2').text('unit: '+dataObj.sensorLastDataList[0].unit);
$('#data3').text('time: '+dataObj.sensorLastDataList[0].updateTime);
$('#data4').text('value: '+dataObj.sensorLastDataList[0].value);
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
console.log('Error');
}
});
})
</script>
</body>
</html>