Spinner在Flask中的动态加载效果如何实现

flask

小樊

2024-09-09 08:40:38

栏目: 编程语言

要在 Flask 中实现 Spinner 的动态加载效果，你可以使用 JavaScript 和 AJAX 技术。这里是一个简单的示例，展示了如何在 Flask 应用中实现 Spinner 的动态加载效果：

首先，创建一个简单的 Flask 应用：

from flask import Flask, render_template, jsonify
import time

app = Flask(__name__)

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

@app.route('/load_data')
def load_data():
    # 模拟数据加载过程
    time.sleep(3)
    data = "数据已加载完成！"
    return jsonify({'data': data})

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

创建一个名为 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>Spinner 动态加载示例</title>
   <style>
        .spinner {
            display: none;
            margin: 20px auto;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <h1>Spinner 动态加载示例</h1>
    <div class="spinner"></div>
   <button id="loadDataBtn">加载数据</button>
    <div id="dataContainer"></div>

   <script>
        document.getElementById("loadDataBtn").addEventListener("click", function() {
            // 显示 Spinner
            document.querySelector(".spinner").style.display = "block";

            // 发送 AJAX 请求加载数据
            fetch("/load_data")
                .then(response => response.json())
                .then(data => {
                    // 隐藏 Spinner
                    document.querySelector(".spinner").style.display = "none";

                    // 显示加载的数据
                    document.getElementById("dataContainer").innerHTML = data.data;
                })
                .catch(error => {
                    console.error("Error:", error);
                });
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的 Flask 应用，包含一个名为 load_data 的路由，用于模拟数据加载过程。在 index.html 文件中，我们使用 CSS 创建了一个简单的 Spinner，并使用 JavaScript 和 AJAX 技术实现了动态加载效果。当用户点击 “加载数据” 按钮时，Spinner 将显示，并发送 AJAX 请求加载数据。数据加载完成后，Spinner 将隐藏，并显示加载的数据。

Spinner在Flask中的动态加载效果如何实现

最新问答

相关标签