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

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

1. 首先，创建一个简单的 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)

1. 创建一个名为 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 将隐藏，并显示加载的数据。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！