Saya menulis fail server.py yang boleh menyimpan nama pelajar, nombor indeks dan gred purata. Apabila saya menjalankan fail client.html dan masukkan data dan klik tambah pelajar, ia mengatakan pelajar telah berjaya ditambahkan, tetapi apabila saya memasukkan indeksnya untuk menggunakan fungsi dapatkan pelajar, ia mengatakan 404 Pelajar Tidak Ditemui.
Ini ialah kod fail server.py:
from flask import Flask, request, jsonify
import pickle
app = Flask(__name__)
try:
with open('students.pickle', 'rb') as f:
students = pickle.load(f)
except FileNotFoundError:
students = {}
@app.route("/")
def index():
with open("client.html") as f:
return f.read()
@app.route('/add_student', methods=['POST'])
def add_student():
name = request.form.get('name')
surname = request.form.get('surname')
index = request.form.get('index')
grade = request.form.get('grade')
students[index] = {'name': name, 'surname': surname, 'index': index,'grade': grade}
with open('students.pickle', 'wb') as f:
pickle.dump(students, f)
return jsonify(message='Student added successfully'), 201
@app.route('/get_student/<int:index>', methods=['GET'])
def get_student(index):
student = students.get(index)
if student:
return jsonify(student)
else:
return 'Student not found', 404
if __name__ == '__main__':
app.run(host='localhost', port=8000, debug=True)
Ini ialah kod fail client.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
function getStudent() {
var index = $("#index").val();
$.ajax({
type: "GET",
url: "http://localhost:8000/get_student/" + index,
success: function(data) {
$("#student-info").text(JSON.stringify(data));
},
error: function() {
$("#student-info").text("Student not found");
}
});
}
function addStudent() {
var data = new FormData();
data.append("name", $("#name").val());
data.append("surname", $("#surname").val());
data.append("index", $("#index").val());
data.append("grade", $("#grade").val());
$.ajax({
type: "POST",
url: "http://localhost:8000/add_student",
data: data,
processData: false,
contentType: false,
success: function(data) {
$("#add-student-result").text("Student added");
},
error: function() {
$("#add-student-result").text("Error adding student");
}
});
}
$("#get-student-form").submit(function(e) {
e.preventDefault();
getStudent();
});
$("#add-student-form").submit(function(e) {
e.preventDefault();
addStudent();
});
});
</script>
</head>
<body>
<form id="get-student-form">
<label for="index">Index:</label>
<input type="text" id="index" name="index">
<button type="submit">Get Student</button>
</form>
<div id="student-info"></div>
<br>
<form id="add-student-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname">
<br>
<label for="index">Index:</label>
<input type="text" id="index" name="index">
<br>
<label for="grade">Grade:</label>
<input type="text" id="grade" name="grade">
<br>
<button type="submit">Add Student</button>
</form>
<div id="add-student-result"></div>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam halaman html, anda memberikan id yang sama kepada kedua-dua elemen (kotak set indeks dan kotak dapatkan), jadi kod hanya mencari elemen pertama, jadi indeks dalam kamus akan sama dengan " " dan kod itu' t jumpa.
EDIT: Pepijat lain ialah indeks mestilah rentetan, dalam fungsi get ia mestilah rentetan. [Hanya lakukan indeks = str(indeks)]
Semoga membantu.