### 使用HTML前端和Python后端交互更新服务器上的数据 为了实现HTML前端与Python后端之间的交互并更新服务器上的数据，可以采用基于AJAX的技术来异步提交数据给后端。这里介绍一种利用`jQuery AJAX`配合`Flask`框架的方法。 #### 后端设置 (Flask) 在服务端使用Flask创建一个简单的API接口用于接收来自客户端的数据修改请求： ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/update', methods=['POST']) def update_data(): data = request.form # 获取表单形式的数据 name = data.get('name') age = data.get('age') # 假设这里是保存到数据库或其他持久化存储的操作 response = { 'status': 'success', 'message': f'Updated {name} with age {age}' } return jsonify(response), 200 if __name__ == '__main__': app.run(debug=True) ``` 此代码片段定义了一个名为`/update`的路由，它接受POST方法传入的数据，并将其解析为字典对象以便进一步处理[^1]。 #### HTML + JavaScript 客户端部分 接下来，在前端编写一段HTML代码连同JavaScript脚本一起工作，当用户填写特定的信息并点击按钮时触发向上述API发送请求的动作： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Update Data</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="dataForm"> Name:<br> <input type="text" name="name"><br><br> Age:<br> <input type="number" name="age"><br><br> <button type="submit">Submit</button> </form> <div id="responseMessage"></div> <script> $(document).ready(function(){ $('#dataForm').on('submit', function(event){ event.preventDefault(); // 阻止默认行为 $.ajax({ url: '/update', method: 'POST', contentType: "application/x-www-form-urlencoded",// 设置content-type以匹配后端期望的内容类型 data: $(this).serialize(), // 序列化表单中的所有字段 success:function(data,status,xhr){ console.log("Success:", status); $("#responseMessage").html(`Server Response: ${JSON.stringify(data)}`); }, error:function(xhr,status,errorThrown){ console.error("Error:", errorThrown); alert("An error occurred while trying to submit the form."); } }); }); }); </script> </body> </html> ``` 这段代码展示了如何构建一个包含两个输入框（名字和年龄）的小型网页表单，并通过绑定事件监听器的方式捕获用户的提交动作。一旦检测到提交，则阻止其默认刷新页面的行为转而执行自定义逻辑——即发起一次带有表单序列化的Ajax POST请求至指定路径 `/update` 上去[^2][^3]。 成功接收到响应之后会在页面上显示出来；如果遇到错误则弹窗提示用户发生了什么问题。