1.对JSON中的时间戳的处理
/**
* 该方法返回日期的格式 yyyy-MM-dd HH:mm:ss
* @param num 如果用户传入了参数那么就返回用户所需要的日期对应的格式，
* 如果用户没有传入, 那么就返回当前返回当前系统日期
*/
function formatDate(num) {
var date = null;
// 用户传入num
if(num) {
date = new Date(num);
}else { // 用户没有传入
date = new Date();
}
var year = date.getFullYear(); //年份
var month = date.getMonth(); //月份
var day = date.getDate(); //获取日期
var hour = date.getHours(); //小时
var minute = date.getMinutes(); //分钟
var second = date.getSeconds(); //获取秒
// var fullMonth = (month + 1) < 10 ? '0' + (month + 1) : (month + 1);
var fullMonth = getNumFullFormate(month + 1); //获取月份的完整格式
var fullDay = getNumFullFormate(day);
var fullHour = getNumFullFormate(hour);
var fullMinute = getNumFullFormate(minute);
var fullSecond = getNumFullFormate(second);
// 2020-01-23 12:12:23
return year + "-" + fullMonth + "-" + fullDay + " " + fullHour + ":" + fullMinute + ":" + fullSecond;
}
function getNumFullFormate(num) {
return num < 10 ? '0' + num : num;
}
html页面
<body>
<table width="80%" style="text-align: center;" align="center" cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>邮件</th>
<th>生日</th>
<th>更新时间</th>
<th>创建时间</th>
</tr>
</thead>
<tbody id="dataContent">
</tbody>
</body>
编写获取服务器数据的js
<script>
var dataContent = document.getElementById("dataContent");
function ajax(url, method) {
if(!url.trim()) {
console.log('url 为必选参数.')
return;
}
// 初始化异步请求的对象
var xhr = new XMLHttpRequest();
// 监听请求过程状态的变化
xhr.onreadystatechange = function() {
// 服务器端放回了数据，并且数据正确
if(xhr.readyState == 4 && xhr.status == 200) {
// 获取服务器响应的数据, 数据的格式为 "[{}, {}]"
// JSON.parse() 是将一个类似于json的字符串，转换为js可以直接使用的数据或者对象。
var res = JSON.parse(xhr.responseText); //
renderData(res);
}
}
//如果用户名没有传入 method, 默认走GET
if(!method || 'GET' == method.toUpperCase()) {
// 初始化请求
xhr.open('GET', url);
// 发送请求
xhr.send();
}
}
ajax('http://localhost:8080/Day60_war_exploded/ajax-people');
//将返回的数据渲染到表格中
function renderData(res) {
for(var i = 0; i < res.length; i++) {
var value = res[i];
console.log(value);
//插入行
var row = dataContent.insertRow();
//插入列
var idCell = row.insertCell();
//添加数据
idCell.innerText = value.id;
// 插入单元格
var nameCell = row.insertCell();
// 设置name
nameCell.innerText = value.name;
// 插入单元格
var genderCell = row.insertCell();
// 设置性别
genderCell.innerText = value.gender == 'F' ? '女' : '男';
// 插入单元格
var emailCell = row.insertCell();
// 设置邮件
emailCell.innerText = value.email;
// 插入单元格
var birthdayCell = row.insertCell();
// 设置生日
birthdayCell.innerText = value.birthday;
// 插入单元格
var updateTimeCell = row.insertCell();
// 设置吃
updateTimeCell.innerText = formatDate(value.updateTime);
// 插入单元格
var createTimeCell = row.insertCell();
// 设置吃
createTimeCell.innerText = formatDate(value.createTime);
}
}
</script>
