flask 进行前后端数据交互

前端页面用户的输入传递到后端主要通过 HTTP 请求实现，常见的方式包括：

1. 表单提交（GET/POST）

2. AJAX 请求（异步传输）

3. URL 参数（GET 请求）

1.表单提交（GET/POST）

前端（HTML 表单）

<!-- templates/form.html -->
<form method="POST" action="/submit">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">提交</button>
</form>

• method="POST"：数据以 POST 请求发送（推荐，更安全）。

• action="/submit"：指定后端处理路由。

• name="username"：后端通过该名称获取数据。

后端（Flask 处理）

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit():
    username = request.form.get('username')  # 获取表单数据
    password = request.form.get('password')
    return f"用户名: {username}, 密码: {password}"

@app.route('/form')
def show_form():
    return render_template('form.html')  # 渲染表单页面

if __name__ == '__main__':
    app.run(debug=True)

2. AJAX 请求（异步传输）

适用于无需刷新页面的数据交互（如搜索框、动态加载）。

前端（JavaScript + Fetch API）

<!-- templates/ajax.html -->
<input type="text" id="search" placeholder="输入关键词">
<button onclick="sendData()">搜索</button>
<p id="result"></p>

<script>
function sendData() {
    const input = document.getElementById('search').value;
    fetch('/ajax', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: input })  // 发送 JSON 数据
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('result').innerText = data.result;
    });
}
</script>

• fetch 发送 POST 请求，数据以 JSON 格式传输。

后端（Flask 处理 JSON）

from flask import request, jsonify

@app.route('/ajax', methods=['POST'])
def handle_ajax():
    data = request.get_json()  # 获取 JSON 数据
    query = data.get('query')
    return jsonify({'result': f'搜索内容: {query}'})  # 返回 JSON 响应

3. URL 参数（GET 请求）

直接在访问的路径地址上进行传参，适用于简单数据传递（如分页、筛选）。

<!-- 直接拼接参数 -->
<a href="/user?name=John&age=25">用户信息</a>

或通过 JavaScript 动态生成 URL：

const name = "John";
const age = 25;
window.location.href = `/user?name=${name}&age=${age}`;

后端（获取 URL 参数）

@app.route('/user')
def get_user():
    name = request.args.get('name')  # 获取 URL 参数
    age = request.args.get('age')
    return f"用户名: {name}, 年龄: {age}"

 

方式	适用场景	前端代码	后端获取方式
表单 POST	登录、注册等表单提交	<form method="POST">	request.form.get()
AJAX	动态交互（如搜索）	fetch() + JSON	request.get_json()
URL 参数	简单数据传递（如分页）	?key=value	request.args.get()