Flask框架中局部刷新页面

🚀 在 Flask 中使用 AJAX 仅刷新 leftMenue.html

你的项目使用 Flask，想要在 添加网站后，仅刷新 leftMenue.html 而不刷新整个页面，可以使用 AJAX（推荐）。

✅ 1. 在 app.py 里创建一个返回 leftMenue.html 的路由

在 Flask 里，我们需要一个专门的 API 来返回 最新的 leftMenue.html。

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 模拟数据库中的分类数据
categories = ["旅游", "商城", "搜索引擎", "云服务商", "影音", "社交"]

@app.route('/update-left-menu', methods=['GET'])
def update_left_menu():
    """ 返回最新的 leftMenue.html """
    return render_template("includes/leftMenue.html", categories=categories)

@app.route('/add-site', methods=['POST'])
def add_site():
    """ 处理添加网站请求 """
    new_category = request.form.get("category_name")
    if new_category:
        categories.append(new_category)  # 模拟数据库插入
        return jsonify({"success": True})
    return jsonify({"success": False, "error": "分类名称不能为空"})

✅ 2. 修改 leftMenue.html 让它使用 categories 数据

<ul>
    {% for category in categories %}
        <li>{{ category }}</li>
    {% endfor %}
</ul>

✅ 3. 在前端（JS）使用 AJAX 重新加载 leftMenue.html

function refreshLeftMenu() {
    fetch('/update-left-menu')  // 这里的 URL 对应 Flask 视图
    .then(response => response.text())
    .then(html => {
        document.getElementById("leftMenuContainer").innerHTML = html;
    })
    .catch(error => console.error("更新菜单失败:", error));
}

✅ 4. 在 base.html 里给 leftMenue.html 设定 id

<div id="leftMenuContainer">
    {% include 'includes/leftMenue.html' %}
</div>

✅ 5. 在添加网站成功后调用 refreshLeftMenu()

function addSite() {
    let formData = new FormData(document.getElementById("addSiteForm"));

    fetch('/add-site', {
        method: "POST",
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            refreshLeftMenu();  // 重新加载菜单
        } else {
            console.error("添加网站失败:", data.error);
        }
    });
}

🎯 结论

✅ 添加网站后，只更新 leftMenue.html，不会刷新整个页面
✅ Flask 返回最新 categories，前端用 fetch() 自动刷新
✅ 体验更流畅，不会影响用户正在浏览的内容

🚀 这样，你的 Flask 网站菜单可以动态更新，而不会刷新整个页面！