一个页面上有10个订单,每个订单信息通过 /api/order/{id}获取详细信息, 点击一个"刷新"按钮重新获取订单信息,并按订单最后更新时间倒序排列。用原生javascript,前后端分离
时间: 2024-01-23 11:01:37 浏览: 37
前后端分离的情况下,我们可以通过 AJAX 技术向后端发送请求并获取订单信息,使用 JavaScript 对页面进行操作。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单列表</title>
</head>
<body>
<h1>订单列表</h1>
<button id="refreshBtn">刷新</button>
<ul id="orderList"></ul>
<script src="app.js"></script>
</body>
</html>
```
JavaScript 代码:
```javascript
// 获取订单列表元素
var orderList = document.getElementById("orderList");
// 刷新按钮点击事件处理函数
function refresh() {
// 发送 AJAX 请求获取订单信息
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/orders", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析订单信息,更新订单列表
var orders = JSON.parse(xhr.responseText);
updateOrderList(orders);
}
};
xhr.send();
}
// 更新订单列表
function updateOrderList(orders) {
// 按订单最后更新时间倒序排列
orders.sort(function(a, b) {
return new Date(b.updateTime) - new Date(a.updateTime);
});
// 清空订单列表
orderList.innerHTML = "";
// 遍历订单列表,创建订单元素并添加到订单列表中
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
var li = document.createElement("li");
li.innerHTML = "订单 " + order.id + ",更新时间:" + order.updateTime;
orderList.appendChild(li);
}
}
// 绑定刷新按钮点击事件
var refreshBtn = document.getElementById("refreshBtn");
refreshBtn.onclick = refresh;
// 初始化页面,获取订单信息并更新订单列表
refresh();
```
在以上代码中,我们通过 AJAX 技术发送 GET 请求到 /api/orders 接口,获取订单信息,并使用 JavaScript 对页面进行操作,更新订单列表。刷新按钮点击事件处理函数 refresh 中,我们使用 XMLHttpRequest 对象发送请求,并在 readyState 变为 4 且 status 为 200 的情况下,解析订单信息并更新订单列表。updateOrderList 函数用于按订单最后更新时间倒序排列,并创建订单元素添加到订单列表中。最后,我们在页面加载完成后初始化页面,获取订单信息并更新订单列表。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)