【WEB开发】表单处理 — HTML:<form> + js:FormData fetch + python flask: @app.route(..)

1. 文本输入框

前端代码

HTML:

html 复制代码
<form id="formid_netmanage">
  <label for="ServerPort">服务器端口:</label>
  <input type="text" id="ServerPort" name="ServerPort" value="5001" required>
  <button type="button" id="btnOpenServer" onclick="OpenServer()">打开</button>
</form>

JavaScript (main.js):

javascript 复制代码
function OpenServer() {
    const formElement = document.getElementById('formid_netmanage');
    const formData = new FormData(formElement);

    fetch('/open_server', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text()) // 获取服务器返回的文本
    .then(data => console.log(data)) // 显示返回结果
    .catch(error => console.error(error)); // 捕获并显示错误
}
后端代码(Python Flask)
python 复制代码
from flask import Flask, request

app = Flask(__name__)

@app.route('/open_server', methods=['POST'])
def start_server():
    server_port = request.form.get('ServerPort')
    print(f"Server Port Received: {server_port}")
    return f"Server Port {server_port} received successfully!"

if __name__ == '__main__':
    app.run(debug=True)
讲解
  1. HTML

    • 表单包含一个文本输入框,用户输入服务器端口(默认值为 5001)。
    • 按钮 onclick 调用 JavaScript 函数 OpenServer()
  2. JavaScript

    • FormData(formElement) 自动提取表单中控件的数据。
    • 使用 fetch() 方法向 /open_server 发送 POST 请求,表单数据作为请求体发送。
  3. Flask 后端

    • 使用 request.form.get('ServerPort') 提取 POST 数据中的 ServerPort 值。
    • 返回成功消息,前端在控制台中打印。

2. 单选按钮

前端代码

HTML:

html 复制代码
<form id="formid_netmanage">
  <label>选择环境:</label><br>
  <input type="radio" id="dev" name="environment" value="development">
  <label for="dev">开发环境</label><br>
  <input type="radio" id="prod" name="environment" value="production" checked>
  <label for="prod">生产环境</label><br>
  <button type="button" onclick="OpenServer()">提交</button>
</form>

JavaScript (main.js):

javascript 复制代码
function OpenServer() {
    const formElement = document.getElementById('formid_netmanage');
    const formData = new FormData(formElement);

    fetch('/open_server', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}
后端代码(Python Flask)
python 复制代码
@app.route('/open_server', methods=['POST'])
def start_server():
    environment = request.form.get('environment')
    print(f"Environment Selected: {environment}")
    return f"Environment {environment} selected successfully!"
讲解
  1. HTML

    • 两个单选按钮表示环境选择,只有一个可以选中。
    • checked 属性默认选中生产环境。
  2. JavaScript

    • 使用 FormData 提取选中环境的数据(键为 environment)。
  3. Flask 后端

    • 提取 environment 的值并打印,返回成功消息。

3. 复选框

前端代码

HTML:

html 复制代码
<form id="formid_netmanage">
  <label>选择服务:</label><br>
  <input type="checkbox" id="http" name="services" value="HTTP" checked>
  <label for="http">HTTP</label><br>
  <input type="checkbox" id="ftp" name="services" value="FTP">
  <label for="ftp">FTP</label><br>
  <button type="button" onclick="OpenServer()">提交</button>
</form>

JavaScript (main.js):

javascript 复制代码
function OpenServer() {
    const formElement = document.getElementById('formid_netmanage');
    const formData = new FormData(formElement);

    fetch('/open_server', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}
后端代码(Python Flask)
python 复制代码
@app.route('/open_server', methods=['POST'])
def start_server():
    services = request.form.getlist('services')
    print(f"Selected Services: {services}")
    return f"Selected Services: {', '.join(services)}"
讲解
  1. HTML

    • 每个复选框代表一个服务,用户可以选择多个。
    • checked 属性默认选中 HTTP。
  2. JavaScript

    • FormData 提取复选框选中的数据(多选值会以数组形式发送)。
  3. Flask 后端

    • 使用 request.form.getlist('services') 获取所有选中的值。

4. 文件上传

前端代码

HTML:

html 复制代码
<form id="formid_netmanage" enctype="multipart/form-data">
  <label for="uploadFile">上传文件:</label>
  <input type="file" id="uploadFile" name="uploadFile">
  <button type="button" onclick="OpenServer()">上传</button>
</form>

JavaScript (main.js):

javascript 复制代码
function OpenServer() {
    const formElement = document.getElementById('formid_netmanage');
    const formData = new FormData(formElement);

    fetch('/upload_file', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}
后端代码(Python Flask)
python 复制代码
@app.route('/upload_file', methods=['POST'])
def upload_file():
    uploaded_file = request.files.get('uploadFile')
    if uploaded_file:
        filename = uploaded_file.filename
        # 假设保存到本地
        uploaded_file.save(f'./uploads/{filename}')
        return f"File {filename} uploaded successfully!"
    return "No file uploaded!"
讲解
  1. HTML

    • 文件输入框允许用户选择文件。
    • 表单需要添加 enctype="multipart/form-data" 属性。
  2. JavaScript

    • FormData 会自动处理文件对象。
  3. Flask 后端

    • 使用 request.files.get('uploadFile') 获取上传的文件。

通过以上示例,可以看到 FormDatafetch 的配合可以极大简化前端数据发送的代码,后端可以通过 Flask 提取数据,完成实际的业务逻辑处理。

相关推荐
一只小灿灿9 分钟前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜0521 分钟前
react状态管理库 - zustand
前端·react.js·前端框架
weixin_4188138743 分钟前
Python-可视化学习笔记
笔记·python·学习
Jerry Lau1 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
Danceful_YJ1 小时前
4.权重衰减(weight decay)
python·深度学习·机器学习
我命由我123451 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw01 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
落笔画忧愁e1 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景1 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试常考题目详解
前端·javascript