写一个航班管理员的html页面，能完成删除，修改，新增航班信息，并发送request请求给spring boot后端，根据返回结果渲染界面，这是航班模型private String id; private String src; private String des; private Date date; private String startTime; private String endTime; private int remainSeats; private float fares; private float discountNums; private float discount; private String company;

下面是一个简单的航班管理员的HTML页面，可以完成删除、修改、新增航班信息的操作，并发送请求给后端，根据返回结果渲染界面。假设后端的API接口如下： - GET /flights：获取所有航班信息 - POST /flight：新增一条航班信息 - PUT /flight/{id}：更新指定ID的航班信息 - DELETE /flight/{id}：删除指定ID的航班信息 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>航班管理系统</title> </head> <body> <h1>航班管理系统</h1> <table> <thead> <tr> <th>ID</th> <th>出发地</th> <th>目的地</th> <th>日期</th> <th>起飞时间</th> <th>到达时间</th> <th>余票数量</th> <th>票价</th> <th>折扣数</th> <th>折扣</th> <th>航空公司</th> <th>操作</th> </tr> </thead> <tbody id="flightList">  </tbody> </table> <h2>新增航班信息</h2> <form id="addFlightForm"> <label for="addId">ID：</label> <input type="text" id="addId" name="id"><br> <label for="addSrc">出发地：</label> <input type="text" id="addSrc" name="src"><br> <label for="addDes">目的地：</label> <input type="text" id="addDes" name="des"><br> <label for="addDate">日期：</label> <input type="date" id="addDate" name="date"><br> <label for="addStartTime">起飞时间：</label> <input type="time" id="addStartTime" name="startTime"><br> <label for="addEndTime">到达时间：</label> <input type="time" id="addEndTime" name="endTime"><br> <label for="addRemainSeats">余票数量：</label> <input type="number" id="addRemainSeats" name="remainSeats"><br> <label for="addFares">票价：</label> <input type="number" id="addFares" name="fares"><br> <label for="addDiscountNums">折扣数：</label> <input type="number" id="addDiscountNums" name="discountNums"><br> <label for="addDiscount">折扣：</label> <input type="number" id="addDiscount" name="discount"><br> <label for="addCompany">航空公司：</label> <input type="text" id="addCompany" name="company"><br> <button type="submit">提交</button> </form> <h2>修改航班信息</h2> <form id="updateFlightForm"> <label for="updateId">ID：</label> <input type="text" id="updateId" name="id"><br> <label for="updateSrc">出发地：</label> <input type="text" id="updateSrc" name="src"><br> <label for="updateDes">目的地：</label> <input type="text" id="updateDes" name="des"><br> <label for="updateDate">日期：</label> <input type="date" id="updateDate" name="date"><br> <label for="updateStartTime">起飞时间：</label> <input type="time" id="updateStartTime" name="startTime"><br> <label for="updateEndTime">到达时间：</label> <input type="time" id="updateEndTime" name="endTime"><br> <label for="updateRemainSeats">余票数量：</label> <input type="number" id="updateRemainSeats" name="remainSeats"><br> <label for="updateFares">票价：</label> <input type="number" id="updateFares" name="fares"><br> <label for="updateDiscountNums">折扣数：</label> <input type="number" id="updateDiscountNums" name="discountNums"><br> <label for="updateDiscount">折扣：</label> <input type="number" id="updateDiscount" name="discount"><br> <label for="updateCompany">航空公司：</label> <input type="text" id="updateCompany" name="company"><br> <button type="submit">提交</button> </form> <h2>删除航班信息</h2> <form id="deleteFlightForm"> <label for="deleteId">ID：</label> <input type="text" id="deleteId" name="id"><br> <button type="submit">提交</button> </form> <script> var flightList = document.getElementById("flightList"); // 获取所有航班信息 function getFlightList() { fetch('/flights') .then(response => response.json()) .then(data => { flightList.innerHTML = ''; data.forEach(flight => { var tr = document.createElement('tr'); var idTd = document.createElement('td'); idTd.innerText = flight.id; tr.appendChild(idTd); var srcTd = document.createElement('td'); srcTd.innerText = flight.src; tr.appendChild(srcTd); var desTd = document.createElement('td'); desTd.innerText = flight.des; tr.appendChild(desTd); var dateTd = document.createElement('td'); var date = new Date(flight.date); dateTd.innerText = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); tr.appendChild(dateTd); var startTimeTd = document.createElement('td'); startTimeTd.innerText = flight.startTime; tr.appendChild(startTimeTd); var endTimeTd = document.createElement('td'); endTimeTd.innerText = flight.endTime; tr.appendChild(endTimeTd); var remainSeatsTd = document.createElement('td'); remainSeatsTd.innerText = flight.remainSeats; tr.appendChild(remainSeatsTd); var faresTd = document.createElement('td'); faresTd.innerText = flight.fares; tr.appendChild(faresTd); var discountNumsTd = document.createElement('td'); discountNumsTd.innerText = flight.discountNums; tr.appendChild(discountNumsTd); var discountTd = document.createElement('td'); discountTd.innerText = flight.discount; tr.appendChild(discountTd); var companyTd = document.createElement('td'); companyTd.innerText = flight.company; tr.appendChild(companyTd); var operationTd = document.createElement('td'); var updateLink = document.createElement('a'); updateLink.href = '#'; updateLink.innerText = '修改'; updateLink.onclick = function() { document.getElementById("updateId").value = flight.id; document.getElementById("updateSrc").value = flight.src; document.getElementById("updateDes").value = flight.des; document.getElementById("updateDate").value = flight.date; document.getElementById("updateStartTime").value = flight.startTime; document.getElementById("updateEndTime").value = flight.endTime; document.getElementById("updateRemainSeats").value = flight.remainSeats; document.getElementById("updateFares").value = flight.fares; document.getElementById("updateDiscountNums").value = flight.discountNums; document.getElementById("updateDiscount").value = flight.discount; document.getElementById("updateCompany").value = flight.company; return false; }; operationTd.appendChild(updateLink); var deleteLink = document.createElement('a'); deleteLink.href = '#'; deleteLink.innerText = '删除'; deleteLink.onclick = function() { document.getElementById("deleteId").value = flight.id; return false; }; operationTd.appendChild(deleteLink); tr.appendChild(operationTd); flightList.appendChild(tr); }); }); } // 提交新增航班信息表单 document.getElementById("addFlightForm").addEventListener("submit", function(event) { event.preventDefault(); var formData = new FormData(event.target); var data = {}; formData.forEach((value, key) => data[key] = value); fetch('/flight', { method: 'POST', body: JSON.stringify(data), headers:{ 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => { alert(data.message); getFlightList(); }); }); // 提交更新航班信息表单 document.getElementById("updateFlightForm").addEventListener("submit", function(event) { event.preventDefault(); var formData = new FormData(event.target); var data = {}; formData.forEach((value, key) => data[key] = value); fetch('/flight/' + data.id, { method: 'PUT', body: JSON.stringify(data), headers:{ 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => { alert(data.message); getFlightList(); }); }); // 提交删除航班信息表单 document.getElementById("deleteFlightForm").addEventListener("submit", function(event) { event.preventDefault(); var formData = new FormData(event.target); var data = {}; formData.forEach((value, key) => data[key] = value); fetch('/flight/' + data.id, { method: 'DELETE', headers:{ 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => { alert(data.message); getFlightList(); }); }); // 页面加载完成后获取所有航班信息 getFlightList(); </script> </body> </html> ``` 这里使用了fetch API发送请求，并使用JSON格式传递数据。需要注意的是，使用JSON格式传递数据时需要给请求头设置Content-Type为application/json。后端返回的消息格式应该为JSON格式，包含一个message字段表示操作结果。

阅读全文

相关推荐

采用spring boot的项目，一个后台管理系统

管理后台html页面

航班信息查询，添加项目

vue前端怎么传参给spring boot后端

写一个民航查询航班的html页面，上面是欢迎登录，中间一个框显示航班信息，下面是一左一右两个按钮，左边是查询，点击发送request请求给后端，并将后端结果输出到中间框中，点击退出按钮，转跳到首页面

写一个spring boot的后端登录代码

spring boot后端得到json数据然后写入MySQL

如何在Vue项目中集成Spring Boot后端服务，并实现商品信息的CRUD操作？

spring-boot-combine-request:Spring Boot Combine请求

spring-boot-qna：CodeSquad Java后端Spring Boot教程

基于Spring Cloud的nbsaas-boot后端开发框架资源

如何在Java中使用Spring Boot构建petstore后端

在Spring Boot后端中配置文件上传路径和大小限制。

前端vue发送的json字符串后端spring boot用什么注解接收

请帮我写一个微信小程序获取微信用户权限信息的后端代码，语言采用spring boot

给Spring boot的图书管理系统添加新增功能，点击新增，转入新增页面，当输入书名、作者、出版社等，点击完成，新增一行书，跳到主页，添加删除功能，第行添加一个删除功能，用于删除这一行

后端spring-boot可以对一个接口同时给url和body传参吗

前段VUE向后端spring boot传list

uni.request直接发送formData java后端无法接收

最新推荐

Spring Boot中扩展XML请求与响应的支持详解

python3发送request请求及查看返回结果实例

springcloud 中 zuul 修改请求参数信息的方法

在Spring MVC或Spring Boot中使用Filter打印请求参数问题

Spring Boot中使用RSocket的示例代码

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能