Flask页面加载滚动球异常：点击提交按钮无加载效果求助

嘿，我明白你现在的困扰——页面初始加载时滚动球能正常工作，但点击提交按钮后就没动静了。这是因为你当前用的是同步表单提交：点击按钮后浏览器会直接发送请求，等待后端响应的过程中页面处于等待状态，而你写的document.onreadystatechange只在页面首次加载或刷新时触发，完全管不了表单提交的场景。

咱们得改成异步请求（AJAX）来处理，这样页面不会跳转，还能全程控制加载动画的显示。下面是具体的修改步骤：

1. 调整后端代码，支持返回JSON数据 #

原来的POST请求会渲染新模板，现在改成返回JSON，方便前端处理：

from flask import Flask, request, render_template, jsonify
import time

app = Flask(__name__)

def long_load(typeback):
    time.sleep(5) # 模拟耗时操作
    return "You typed: %s" % typeback

@app.route('/', methods=("POST", "GET"))
def test():
    if request.method == 'GET':
        return render_template('index.html')
    elif request.method == 'POST':
        query = request.form['anything']
        outcome = long_load(query)
        # 返回JSON而不是渲染模板
        return jsonify({"display": outcome})

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

2. 修改前端HTML和JS逻辑 #

需要把表单的默认提交行为禁用，改用AJAX发送请求，同时控制加载动画的显示/隐藏：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 加载动画样式 */
        div#loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            /* 默认隐藏，需要时显示 */
            display: none;
            margin: 20px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 初始页面加载的动画（保留原来的需求） */
        body {
            visibility: hidden;
        }
        #initial-loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <!-- 初始页面加载的loader -->
    <div id="initial-loader"></div>

    <!-- 表单区域 -->
    <form id="search-form">
        <div class="caption">
            <table class="center">
                <tr>
                    <td class="NEONpinktxt">
                        <!-- 补充输入框，原代码遗漏了输入内容的入口 -->
                        <input type="text" name="anything" placeholder="输入内容..." required>
                    </td>
                    <td align="center">
                        <button type="submit" id="submit-btn">Search Results</button>
                    </td>
                </tr>
            </table>
        </div>
    </form>

    <!-- 表单提交时的加载动画 -->
    <div id="loader"></div>

    <!-- 用来显示结果的区域 -->
    <div id="result-area" style="text-align:center; margin-top:20px;"></div>

    <script>
        // 初始页面加载的动画逻辑
        document.onreadystatechange = function() {
            if (document.readyState !== "complete") {
                document.querySelector("#initial-loader").style.visibility = "visible";
            } else {
                document.querySelector("#initial-loader").style.display = "none";
                document.querySelector("body").style.visibility = "visible";
            }
        };

        // 表单提交的AJAX逻辑
        const form = document.getElementById('search-form');
        const loader = document.getElementById('loader');
        const resultArea = document.getElementById('result-area');
        const submitBtn = document.getElementById('submit-btn');

        form.addEventListener('submit', function(e) {
            // 阻止表单默认提交行为，避免页面跳转
            e.preventDefault();
            
            // 获取输入框内容
            const query = form.querySelector('input[name="anything"]').value;
            
            // 显示加载动画，禁用按钮防止重复提交
            loader.style.display = 'block';
            submitBtn.disabled = true;
            resultArea.innerHTML = '';

            // 发送AJAX POST请求
            fetch('/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `anything=${encodeURIComponent(query)}`
            })
            .then(response => response.json())
            .then(data => {
                // 请求成功：隐藏动画，启用按钮，展示结果
                loader.style.display = 'none';
                submitBtn.disabled = false;
                resultArea.innerHTML = `<p style="font-size:1.2rem;">${data.display}</p>`;
            })
            .catch(error => {
                // 请求失败：隐藏动画，启用按钮，提示错误
                loader.style.display = 'none';
                submitBtn.disabled = false;
                resultArea.innerHTML = `<p style="color:red;">请求出错了：${error.message}</p>`;
            });
        });
    </script>
</body>
</html>

关键修改点说明 #

• 禁用同步提交：用e.preventDefault()阻止表单默认跳转，改用AJAX异步请求，让页面保持在当前状态
• 分离加载动画：区分初始页面加载的动画和表单提交的动画，避免逻辑混淆
• 状态控制：提交时显示动画、禁用按钮防止重复操作，请求完成后隐藏动画、恢复按钮并展示结果
• 后端返回JSON：异步请求更适合接收JSON数据，前端可以灵活处理返回结果

这样修改后，点击"Search Results"按钮时，加载动画会立刻显示，等后端处理完成后自动隐藏并展示结果，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者Mikee