写一个航班管理员的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;
时间: 2024-02-03 07:02:07 浏览: 63
好的,以下是一个简单的航班管理员的HTML页面示例,可以实现新增航班信息,并发送request请求给Spring Boot后端,根据返回结果渲染界面。请注意,此示例仅用于演示用途,具体的实现可能因项目而异。
```
<!DOCTYPE html>
<html>
<head>
<title>航班管理员</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>新增航班信息</h1>
<form>
<label for="id">航班编号:</label>
<input type="text" id="id" name="id"><br><br>
<label for="src">出发地:</label>
<input type="text" id="src" name="src"><br><br>
<label for="des">目的地:</label>
<input type="text" id="des" name="des"><br><br>
<label for="date">出发日期:</label>
<input type="date" id="date" name="date"><br><br>
<label for="startTime">出发时间:</label>
<input type="time" id="startTime" name="startTime"><br><br>
<label for="endTime">到达时间:</label>
<input type="time" id="endTime" name="endTime"><br><br>
<label for="remainSeats">剩余座位数:</label>
<input type="number" id="remainSeats" name="remainSeats"><br><br>
<label for="fares">票价:</label>
<input type="number" id="fares" name="fares"><br><br>
<label for="discountNums">折扣数:</label>
<input type="number" id="discountNums" name="discountNums"><br><br>
<label for="discount">折扣率:</label>
<input type="number" id="discount" name="discount"><br><br>
<label for="company">航空公司:</label>
<input type="text" id="company" name="company"><br><br>
<input type="submit" value="提交" id="submitButton">
</form>
<div id="result"></div>
<script>
$(document).ready(function(){
$("#submitButton").click(function(event){
event.preventDefault();
var id = $("#id").val();
var src = $("#src").val();
var des = $("#des").val();
var date = $("#date").val();
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var remainSeats = $("#remainSeats").val();
var fares = $("#fares").val();
var discountNums = $("#discountNums").val();
var discount = $("#discount").val();
var company = $("#company").val();
$.ajax({
type: "POST",
url: "http://localhost:8080/flights",
data: JSON.stringify({
"id": id,
"src": src,
"des": des,
"date": date,
"startTime": startTime,
"endTime": endTime,
"remainSeats": remainSeats,
"fares": fares,
"discountNums": discountNums,
"discount": discount,
"company": company
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
$("#result").html("<p>新增航班信息成功</p>");
},
error: function(jqXHR, textStatus, errorThrown) {
$("#result").html("<p>新增航班信息失败: " + errorThrown + "</p>");
}
});
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了jQuery库来简化Ajax请求。在表单中,我们使用了各种类型的input元素来收集航班信息,并使用JSON格式将数据作为请求主体发送到Spring Boot后端。在成功或失败的情况下,我们使用jQuery的回调函数在页面上显示相应的消息。请注意,这只是一个简单的示例,需要根据实际项目对其进行修改和扩展。
阅读全文