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

相关推荐
软件技术NINI13 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Turnsole_y13 小时前
pycharm自动化测试初始化
python·selenium
weixin-a1530030831614 小时前
[数据抓取-1]beautifulsoup
开发语言·python·beautifulsoup
AI量化投资实验室14 小时前
15年122倍,年化43.58%,回撤才20%,Optuna机器学习多目标调参backtrader,附python代码
人工智能·python·机器学习
mapbar_front14 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
倔强青铜三14 小时前
苦练Python第67天:光速读取任意行,linecache模块解锁文件处理新姿势
人工智能·python·面试
quweiie14 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀14 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻14 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
我是华为OD~HR~栗栗呀15 小时前
华为od-21届考研-C++面经
java·c语言·c++·python·华为od·华为·面试