Flask+jQuery：AJAX技术动态加载网页

最新推荐文章于 2023-06-08 16:57:56 发布

原创

最新推荐文章于 2023-06-08 16:57:56 发布 · 1.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#python #ajax

本文介绍了如何利用jQuery的AJAX技术在Flask搭建的网站上动态加载数据。通过创建JSON数据文件、网页模板、设置静态资源，并在JavaScript中编写加载代码，实现了数据的动态显示。最后展示了效果并提出项目可以进一步拓展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hello，大家好，我是wangzirui32，今天我们来学习如何使用jQuery实现AJAX动态加载网页。

学习目录

1. 准备工作
2. 编写加载代码
3. 效果展示
写在最后

1. 准备工作

准备工作有点多，如果只是来学习jQuery的，请跳到第2部分-编写加载代码。

1.1 搭建测试网站

这里我用Python的Flask搭建了一个测试网站，代码如下：

from flask import Flask
from flask import render_template, jsonify
from json import load

# 这个网站主要用来显示图书数据

app = Flask(__name__)
app.config['SECRET_KEY'] = "ashdakjdhasdhw8w"

@app.route("/")
def home():
    return render_template("home.html")

# API数据接口
@app.route("/api/books/data", methods=["GET"])
def books_data():
	# json数据
    with open("books_data.json") as b_d:
        books = load(b_d)