Flask结合Spinner实现异步加载的秘诀

flask

小樊

2024-09-09 08:46:30

栏目: 编程语言

要在 Flask 应用中实现异步加载，可以使用 Spinner 和 AJAX。Spinner 是一个用于创建和管理异步任务的库，而 AJAX 则用于在不重新加载整个页面的情况下从服务器请求数据并更新页面内容。

以下是如何在 Flask 应用中结合 Spinner 和 AJAX 实现异步加载的秘诀：

安装 Spinner：

pip install spinner

在 Flask 应用中设置 Spinner：

from flask import Flask, render_template
from spinner import Spinner

app = Flask(__name__)
spinner = Spinner(app)

@app.route('/')
def index():
    return render_template('index.html')

@spinner.task()
def my_async_task():
    # 这里执行你的异步任务
    pass

创建一个 HTML 模板（例如 templates/index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Flask Async Loading with Spinner</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Flask Async Loading with Spinner</h1>
   <button id="load-data">Load Data</button>
    <div id="data-container"></div>

   <script>
        $("#load-data").click(function() {
            $.ajax({
                url: '/load-data',
                type: 'GET',
                success: function(data) {
                    $("#data-container").html(data);
                }
            });
        });
    </script>
</body>
</html>

添加一个路由来处理 AJAX 请求：

@app.route('/load-data')
def load_data():
    # 在这里执行你的异步任务并获取结果
    result = my_async_task()
    return result

运行 Flask 应用：

flask run

现在，当用户点击 “Load Data” 按钮时，将通过 AJAX 发送请求到 /load-data 路由，执行异步任务并将结果显示在页面上，而无需重新加载整个页面。

Flask结合Spinner实现异步加载的秘诀

最新问答

相关标签