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

1. 文本输入框

前端代码

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):

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）

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:

<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):

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）

@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:

<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):

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）

@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:

<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):

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）

@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') 获取上传的文件。

---

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