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, [姓名]!”的個性化響應。

（全文完）