写出图书借阅界面,管理员登陆后,有添加按钮,接收数据{ name : , press : , author : },返回json数据{ code :200}的代码
时间: 2024-02-23 17:59:16 浏览: 64
好的,以下是一个简单的使用 Flask 框架实现的图书借阅系统的添加图书信息的界面代码,您可以参考下面的代码进行开发。
HTML 代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书借阅界面</title>
</head>
<body>
<form id="add-form">
<label for="name">图书名称:</label>
<input type="text" name="name" id="name"><br><br>
<label for="press">出版社:</label>
<input type="text" name="press" id="press"><br><br>
<label for="author">作者:</label>
<input type="text" name="author" id="author"><br><br>
<button type="submit">添加</button>
</form>
<div id="result"></div>
<script>
var form = document.getElementById('add-form');
var result = document.getElementById('result');
form.addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var press = document.getElementById('press').value;
var author = document.getElementById('author').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/add_book', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.code === 200) {
result.innerHTML = '添加成功!';
} else {
result.innerHTML = '添加失败!';
}
}
};
var data = JSON.stringify({name: name, press: press, author: author});
xhr.send(data);
});
</script>
</body>
</html>
```
在上面的代码中,我们使用了一个表单来接收图书信息,其中有三个输入框分别用于输入图书名称、出版社和作者,还有一个“添加”按钮用于提交表单。在表单提交时,我们通过 XMLHttpRequest 对象向服务器发送一个 POST 请求,请求的地址为 "/add_book",请求头部设置为 "Content-Type": "application/json",请求体中包含一个 JSON 格式的数据,其中包含图书名称、出版社和作者。在服务器返回响应后,我们解析响应中的 JSON 数据,如果返回的状态码为 200,则说明添加成功,否则添加失败。
以下是 Flask 后端代码:
```
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/add_book', methods=['POST'])
def add_book():
data = request.get_json()
name = data['name']
press = data['press']
author = data['author']
# TODO: 将图书信息添加到数据库中
return jsonify({'code': 200})
if __name__ == '__main__':
app.run(debug=True)
```
在上面的代码中,我们定义了一个路由 "/add_book",用于接收前端发送过来的图书信息。在接收到请求后,我们从请求体中获取到图书名称、出版社和作者,然后将这些信息添加到数据库中。最后,我们返回一个 JSON 格式的数据,其中包含一个状态码 200,表示添加成功。
请注意,以上代码仅为示例代码,您需要根据自己的业务逻辑进行修改和完善。
阅读全文