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

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

1.2 数据文件

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

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

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

1.3 网页模板

在当前目录下创建文件夹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>

head中的script标签是用来加载jQuery的，body中的script标签是用来加载我们即将在下面编写的脚本。

1.4 静态资源

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

2. 编写加载代码

在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("图书数据加载失败！");
        }
    });
});

以上代码就加载了API接口的json数据并输出到网页中。

3. 效果展示

访问127.0.0.1:8000，可以看到：
在这里插入图片描述这样我们的项目就完成了。

写在最后

项目其实还可以进行拓展，比如再加入一些个性化的网页代码，获取网站中其他的数据等等。虽然准备工作有亿点长，但还希望你能学到其中的精髓。

好了，今天的课程就到这儿了，喜欢的可以点个收藏，我们下次再见！

原文链接：https://blog.csdn.net/wangzirui32/article/details/114785492