-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathupdate.html
150 lines (140 loc) · 6.41 KB
/
update.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../js/getUrl.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(public/images/背景.jpg);
background-size: 500% 500%;
background-attachment: fixed"
}
</style>
</head>
<body>
<form>
请输入航班号:<input type="text" id="fno">
<input id="button" type="button" value="查询" onclick="sele();">
</form>
<form id="updata">
<table border="1">
<thead>
<td width=10%>航班号</td>
<td width=8%>目的地</td>
<td width=8%>始发地</td>
<td width=8%>经停</td>
<td width=10%>预计离港时间</td>
<td width=10%>预计到达时间</td>
<td width=10%>实际到达时间</td>
<td width=10%>航班状态</td>
<td width=8%>行李分拣台</td>
<td width=8%>值机柜台</td>
</thead>
<tbody id="main">
</tbody>
<input id="configData" type="button" value="修改">
<input type="button" id="cancelConfig" value="取消" style="margin-left: 10px;display: none;">
</table>
</form>
<script>
let fno = null;
//点击函数 async await是改成同步代码 异步同步问题 百度XD
async function sele() {
fno = $('#fno').val();
render(await getData(fno))
}
//封装一个获取数据的函数 将获取的值返回
async function getData(fno) {
let getData = null
await $.ajax({
url: "http://localhost:3000/air/" + fno,
type: "get",
data: {},
success: function (data) {
data = JSON.parse(JSON.stringify(data))
getData = data;
}
});
alert(getData)
return getData
}
//封装一个渲染页面的函数 因为有多处需要同样的代码所以封装一个减少代码量
function render(data) {
let html = '';
data.plannedDeparturetime = timeFormatter(data.plannedDeparturetime);
data.plannedArrivaltime = timeFormatter(data.plannedArrivaltime);
data.actualArrivaltime = timeFormatter(data.actualArrivaltime);
html += `<tr>
<td> ${data.flightno} </td>
<td> ${data.departure} </td>
<td> ${data.destination} </td>
<td> ${data.stopover} </td>
<td> ${data.plannedDeparturetime} </td>
<td> ${data.plannedArrivaltime} </td>
<td> ${data.actualArrivaltime} </td>
<td> ${data.flightstatus} </td>
<td> ${data.Luggagesorting} </td>
<td> ${data.CheckinCounter} </td>
</tr>`;
let tbody = document.getElementById("main")
tbody.innerHTML = html
}
function timeFormatter(value) {
var da = value.replace("T"," ").replace(".000Z","");
return da;
}
// jq的绑定点击事件的方法
$("#configData").click(async (e) => {
//判断是是否是修改中的状态
if (e.target.value == "确定修改") {
e.target.value = "修改"
$('#cancelConfig').css('display', "none");
//或者id为updata的form表单的内容
let formArray = $("#updata").serializeArray();
let dataObj = {};
for (let item of formArray) {
dataObj[item.name] = item.value;
}
await $.ajax({
url: "http://localhost:3000/air",
type: "POST", //默认get
data: dataObj, //格式{key:value}
success: function (response) { //请求成功回调
render(response.filter((item) => {
return item.flightno == fno;
})[0])
}
})
} else {
$('#cancelConfig').css('display', "inline-block")
e.target.value = "确定修改"
let data = await getData(fno);
let html = ''
data.plannedDeparturetime = timeFormatter(data.plannedDeparturetime);
data.plannedArrivaltime = timeFormatter(data.plannedArrivaltime);
data.actualArrivaltime = timeFormatter(data.actualArrivaltime);
html += `<tr>
<td> <input type="text" name="flightno" value="${data.flightno}"> </td>
<td> <input type="text" name="departure" value="${data.departure}"> </td>
<td> <input type="text" name="destination" value="${data.destination}"> </td>
<td> <input type="text" name="stopover" value="${data.stopover}"> </td>
<td> <input type="text" name="plannedDeparturetime" value="${data.plannedDeparturetime}"> </td>
<td> <input type="text" name="plannedArrivaltime" value="${data.plannedArrivaltime}"> </td>
<td> <input type="text" name="actualArrivaltime" value="${data.actualArrivaltime}"> </td>
<td> <input type="text" name="flightstatus" value="${data.flightstatus}"> </td>
<td> <input type="text" name="Luggagesorting" value="${data.Luggagesorting}"> </td>
<td> <input type="text" name="CheckinCounter" value="${data.CheckinCounter}"> </td>
</tr>`;
let tbody = document.getElementById("main")
tbody.innerHTML = html
}
})
//取消按钮点击事件
$("#cancelConfig").click(async (e) => {
$('#configData').val('修改')
$('#cancelConfig').css('display', "none")
render(await getData(fno))
})
</script>
</body>
</html>