-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpostpage.html
99 lines (97 loc) · 4.9 KB
/
postpage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="zh">
<head>
<title>帖子内容</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/table.css">
</head>
<body>
<h1 style="text-align: center;" id="title"></h1>
<p><span style="text-align: center;display:block;">欢迎，<script>document.write(localStorage.getItem('username'));</script> || <a href="javascript:history.back()">返回</a> | <a href="login.html">登出</a></span></p>
<table class="pure-table" id="posttable">
<thead>
<tr>
<th>作者</th>
<th>内容</th>
<th>创建时间</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div style="text-align:center">
<p>回复：<input type="text" id="replyc" style="width:50%"></p>
<button onclick="reply()">提交</button>
</div>
<script>
function loaddata(){
document.getElementById("tbody").innerHTML = "";
var xhr=new XMLHttpRequest(); //创建对象，准备发送Ajax请求
xhr.onreadystatechange=function () { //监听后台接收请求状态的变化
if (xhr.readyState==4){ //判断当前请求进行到何种状态，属性值 4 表示后台已经接收到前台请求
if (xhr.status==200){ //判断前台是否准确接收到后台反馈的数据，属性值 200 表示通信成功
var pagedata = JSON.parse(xhr.responseText); //解析返回结果转换为对象
var table = document.getElementById("tbody");
document.getElementById("title").innerHTML = pagedata.data.mainpost[0];
var tr = document.createElement('tr');
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML = pagedata.data.mainpost[1];
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.innerHTML = pagedata.data.mainpost[2].replace(/\r\n/g,"<br>");
var td3 = document.createElement('td');
tr.appendChild(td3);
td3.innerHTML = pagedata.data.mainpost[3];
pagedata.data.postreply.forEach(function(element) {
var tr = document.createElement('tr');
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML = element[0];
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.innerHTML = element[1].replace(/\r\n/g,"<br>");
var td3 = document.createElement('td');
tr.appendChild(td3);
td3.innerHTML = element[2];
});
}
}
}
xhr.timeout=2000; //超时设置单位“毫秒”！！
xhr.ontimeout=function(){
alert('访问超时，请刷新页面重新加载。');
}
// 使用 get 方式发送请求：
xhr.open('get',"/api/showpost" + window.location.search,true);
xhr.send(null);
}
function reply(){
if(document.getElementById("replyc").value == ""){
alert("请输入内容");
return;
}
var xhr=new XMLHttpRequest(); //创建对象，准备发送Ajax请求
xhr.onreadystatechange=function () { //监听后台接收请求状态的变化
if (xhr.readyState==4){ //判断当前请求进行到何种状态，属性值 4 表示后台已经接收到前台请求
if (xhr.status==200){ //判断前台是否准确接收到后台反馈的数据，属性值 200 表示通信成功
document.getElementById("replyc").value = "";
loaddata();
}
}
}
xhr.timeout=2000; //超时设置单位“毫秒”！！
xhr.ontimeout=function(){
alert('访问超时，请刷新页面重新加载。');
}
// 使用 post 方式发送请求：
xhr.open('post',"/api/replypost" + window.location.search,true);
xhr.send(document.getElementById("replyc").value);
}
loaddata();
</script>
</body>
</html>