要在 Flask 應用中實現異步加載，可以使用 Spinner 和 AJAX。Spinner 是一個用于創建和管理異步任務的庫，而 AJAX 則用于在不重新加載整個頁面的情況下從服務器請求數據并更新頁面內容。
以下是如何在 Flask 應用中結合 Spinner 和 AJAX 實現異步加載的秘訣：
pip install 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
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>
@app.route('/load-data')
def load_data():
# 在這里執行你的異步任務并獲取結果
result = my_async_task()
return result
flask run
現在，當用戶點擊 “Load Data” 按鈕時，將通過 AJAX 發送請求到 /load-data 路由，執行異步任務并將結果顯示在頁面上，而無需重新加載整個頁面。
