Flask与前端交互：AJAX请求与JSON响应

在Web开发中，前后端分离是常见的架构模式。前端负责用户界面和交互，后端负责数据处理和业务逻辑。Flask作为轻量级Python Web框架，能轻松实现与前端的交互。其中，AJAX（Asynchronous JavaScript and XML）是前端发起异步请求的核心技术，而JSON（JavaScript Object Notation）则是前后端数据交换的通用格式。本文将用最简单的例子，带你理解Flask如何通过AJAX与前端交互，并返回JSON数据。

一、基础概念：AJAX与JSON¶

AJAX：即异步JavaScript和XML，允许浏览器在不刷新整个页面的情况下，与后端进行数据交换。通俗来说，就是点击按钮后，页面悄悄“后台”获取数据，再更新局部内容。
JSON：轻量级的数据交换格式，类似Python字典。它结构简单、易于解析，是前后端传递数据的“通用语言”。

二、Flask与前端交互的核心流程¶

前端发起请求：通过AJAX（如JavaScript的fetch或XMLHttpRequest）向后端发送请求（如获取数据、提交表单）。
后端处理请求：Flask接收请求，执行业务逻辑（如查询数据库、处理数据）。
后端返回响应：后端将结果以JSON格式返回给前端。
前端渲染数据：前端解析JSON数据，更新页面内容（如显示数据、更新列表）。

三、实战示例：前端按钮触发AJAX请求，后端返回JSON¶

我们将通过一个简单的例子实现“点击按钮，后端返回JSON数据，前端显示结果”的完整流程。

步骤1：创建Flask应用¶

首先，安装Flask（若未安装）：

pip install flask

然后编写Flask代码（保存为app.py）：

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

# 前端页面路由（用于展示按钮和结果区域）
@app.route('/')
def index():
    return render_template('index.html')  # 渲染前端页面

# 后端API路由（处理AJAX请求，返回JSON）
@app.route('/api/get_data', methods=['GET'])
def get_data():
    # 模拟业务逻辑：返回一个JSON数据（可替换为数据库查询等）
    data = {
        "status": "success",
        "message": "Hello from Flask!",
        "data": [1, 2, 3, 4, 5]  # 示例数据列表
    }
    return jsonify(data)  # Flask自动将字典转为JSON格式返回

if __name__ == '__main__':
    app.run(debug=True)  # 启动开发服务器

步骤2：编写前端页面（HTML+JavaScript）¶

在Flask项目根目录下创建templates文件夹，并在其中新建index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Flask AJAX示例</title>
</head>
<body>
    <h1>Flask与前端交互示例</h1>
    <button onclick="fetchData()">点击获取数据</button>
    <div id="result"></div>  <!-- 显示后端返回的结果 -->

    <script>
        // 定义获取数据的函数
        async function fetchData() {
            try {
                // 1. 发起AJAX请求（使用fetch API）
                const response = await fetch('/api/get_data');  // 调用后端API
                const data = await response.json();  // 解析后端返回的JSON数据

                // 2. 处理数据并更新页面
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <p>状态：${data.status}</p>
                    <p>消息：${data.message}</p>
                    <p>数据列表：${data.data.join(', ')}</p>
                `;
            } catch (error) {
                // 处理请求失败的情况
                document.getElementById('result').innerHTML = "请求失败，请重试！";
                console.error("Error:", error);
            }
        }
    </script>
</body>
</html>

步骤3：运行并测试¶

确保项目结构如下：

   your_project/
   ├── app.py
   └── templates/
       └── index.html

运行app.py：

   python app.py

打开浏览器访问 http://localhost:5000，点击“点击获取数据”按钮，即可看到后端返回的JSON数据显示在页面上。

四、关键知识点解析¶

后端如何返回JSON：
Flask提供jsonify函数，只需将Python字典/列表传入，即可自动返回JSON格式响应。若直接返回字典，Flask也会自动处理，但推荐用jsonify显式返回。
前端如何发起AJAX请求：
示例中使用fetch API（现代浏览器原生支持），它是异步的，通过async/await语法简化代码。response.json()会自动解析JSON数据，返回一个Promise对象。
请求方法与数据传递：
- 示例中用GET请求（默认），若需传递参数，可在URL后加?key=value，或在fetch中配置method='POST'并添加body参数。
- 若前端需传递复杂数据（如表单数据），可将数据转为JSON字符串，后端通过request.get_json()获取：

     @app.route('/api/submit', methods=['POST'])
     def submit_data():
         data = request.get_json()  # 获取前端POST的JSON数据
         return jsonify({"received": data})

五、总结¶

通过AJAX和JSON，Flask能轻松实现前后端数据交互。核心步骤是：前端发起异步请求 → 后端处理并返回JSON → 前端解析并渲染数据。这一模式是构建动态Web应用的基础，后续可扩展到表单提交、数据库交互、实时数据更新等场景。

扩展练习：尝试修改示例，实现前端输入数据（如姓名），后端返回“Hello, [姓名]!”的个性化响应。

（全文完）