当前位置：首页 > wzjs >正文

重庆建网站派臣公司wordpress目录顺序

wzjs 2025/9/3 4:31:11

重庆建网站派臣公司,wordpress目录顺序,学做网站要代码,python基础教程ppt🚀 在 Flask 中使用 AJAX 仅刷新 leftMenue.html 你的项目使用 Flask，想要在添加网站后，仅刷新 leftMenue.html 而不刷新整个页面，可以使用 AJAX（推荐）。 ✅ 1. 在 app.py 里创建一个返回 leftMenue.html…

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

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

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

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

from flask import Flask, render_template, request, jsonifyapp = 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);}});
}