Flask - Sijax

Flask – 使用 JavaScript 处理 AJAX 请求

现代 Web 应用程序通常需要在不重新加载整个页面的情况下更新页面的部分内容。这通常通过异步 JavaScript 和 XML (AJAX) 技术实现，尽管 JSON 在很大程度上已经取代了 XML 作为数据格式。

如今，标准的做法是使用浏览器内置的 fetch API（或较旧的 XMLHttpRequest），在你的客户端 JavaScript 中向特定的 Flask 端点发送请求，而不是使用像较旧的 Sijax 这样的专用库。这些端点接着处理请求，并通常以 JSON 格式返回数据。

核心概念

客户端 (JavaScript)： 使用 fetch API 向 Flask 服务器上的特定 URL 端点发送 HTTP 请求（例如 GET 或 POST）。你可以随同 POST 请求发送数据。
服务器端 (Flask)： 为该 URL 端点定义一个路由（@app.route）。此视图函数接收请求，执行某些操作（例如查询数据库或执行计算），准备要发送回的数据，并使用 Flask 的 jsonify 函数将其作为 JSON 响应返回。
客户端 (JavaScript)： fetch API 接收 JSON 响应。然后你的 JavaScript 代码处理此数据，并更新 HTML 文档对象模型 (DOM)，以动态反映 Web 页面上的变化。

示例：简单数据获取

我们创建一个示例，其中点击按钮从服务器获取一些数据并将其显示在页面上。

Flask 应用程序 (`app.py`)：

import time
from flask import Flask, render_template, jsonify

app = Flask(__name__)

# 主页的路由
@app.route('/')
def index():
    return render_template('ajax_example.html')

# 提供数据的 API 端点
@app.route('/get_data')
def get_data():
    # 模拟获取数据（例如，从数据库）
    current_time = time.strftime("%H:%M:%S")
    data = {
        'message': 'Data loaded successfully!',
        'timestamp': current_time
    }
    # 将数据作为 JSON 响应返回
    return jsonify(data)

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

HTML 模板 (`templates/ajax_example.html`)：

<!DOCTYPE html>
<html>
<head>
    <title>Flask AJAX Example</title>
</head>
<body>
    <h1>Dynamic Data with Flask and JavaScript</h1>
    <button id="loadDataBtn">Load Data</button>
    <div id="dataContainer" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;">
        Click the button to load data here...
    </div>

    <script>
        const loadDataBtn = document.getElementById('loadDataBtn');
        const dataContainer = document.getElementById('dataContainer');

        loadDataBtn.addEventListener('click', () => {
            dataContainer.textContent = 'Loading...'; // 提供反馈

            // 使用 fetch 调用 Flask 端点
            fetch('/get_data') // 发送 GET 请求
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json(); // 解析 JSON 响应
                })
                .then(data => {
                    // 使用接收到的数据更新 DOM
                    dataContainer.innerHTML = `
                        <p>**Message:** ${data.message}</p>
                        <p>**Server Time:** ${data.timestamp}</p>
                    `;
                })
                .catch(error => {
                    // 处理潜在错误（网络、解析等）
                    dataContainer.textContent = `Error loading data: ${error}`;
                    console.error('Fetch 错误:', error);
                });
        });
    </script>
</body>
</html>

工作原理：

HTML 页面包含一个按钮和一个用于显示数据的 div。
JavaScript 代码为按钮添加了一个事件监听器。
点击按钮时，fetch('/get_data') 向 Flask 中的 /get_data 路由发送一个请求。
Flask 的 get_data() 函数准备一个 Python 字典，并使用 jsonify 将其转换为一个标准的 JSON HTTP 响应。
JavaScript 的 .then(response => response.json()) 解析传入的 JSON。
最后的 .then(data => { ... }) 使用解析后的 data 对象更新 dataContainer div 的内容。
错误处理使用 .catch() 实现。

这种模式是构建交互式 Web 应用程序（包括单页应用程序 SPA）的基础，在这些应用程序中，前端 (JavaScript) 严重依赖后端 API (Flask) 来获取和处理数据。