【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 提取数据,完成实际的业务逻辑处理。

相关推荐
前进的李工5 分钟前
LeetCode hot100:560 和为k的子数组:快速统计法
python·算法·leetcode·前缀和·哈希表
好玩的Matlab(NCEPU)11 分钟前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰15 分钟前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal32826 分钟前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
用户37215742613528 分钟前
Python 高效实现 Excel 与 TXT 文本文件之间的数据转换
python
weixin_4454766829 分钟前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin29 分钟前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风1 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder1 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost1 小时前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求