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

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)
    return jsonify(books)

if __name__ == "__main__":
        # 启动服务器
    app.run(host="0.0.0.0", port=8000, debug=True)

数据文件

在项目目录下创建一个json文件，输入一些测试数据：

books_data.json

[{"book_name": "Python","book_date": "2020-9-1"},{"book_name": "C++","book_date": "2020-9-1"}]

这些数据分别涵盖了书本的名称及出版日期。

python3 test.py 运行这段代码（或云服务器环境下后台运行：nohup python3 -u test.py > test.log 2>&1 &）

Html前端

网页模板

在当前目录下创建文件夹templates，在其内部创建一个home.html的文件，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>查看图书信息</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>网站图书信息显示</h1>
    <ul id="books"></ul>
    <script src="/static/scripts/main.js"></script>
  </body>
</html>

JS文件

在项目目录下创建static文件夹，再在里面创建scripts文件夹，在scripts文件夹里创建一个名为main.js的文件，它就是今天的主角。

$(function(){
	// 找到id为books的ul标签
    var $ulBooks = $("#books");

	// 准备请求
    $.ajax({
        url: '/api/books/data', // 请求地址
        type: 'GET', // 说明请求的类型
        // 请求成功则执行success中的函数
        // data参数说明：由于一个请求会产生多个数据，如状态码，请求头等，我们这里只获取请求到的数据，也就是data
        success: function(data){
        	// each函数遍历数据
        	// i是索引 item是正在遍历的数据
            $.each(data, function(i, item){
            	// 在ul标签中加载数据
            	// item.xxx 即可获取该字典某个键对应的值
                $ulBooks.append("<li>图书名称：" + item.book_name + " --- 图书出版日期：" + item.book_date + "</li>");
            });
        },
        // 报错处理
        error: function(){
        	// 写入日志
            console.log("图书数据加载失败！");
        }
    });
});

测试

浏览器输入：http://119.3.214.221:8000/

参考文档

参考文档：https://blog.csdn.net/wangzirui32/article/details/114785492