用Django全栈开发（进阶篇）——10. Django + Django REST framework + Ajax + Art Template实现异步加载

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程的进阶版。

在之前《用Django全栈开发》系列专辑里面，皮爷详细的阐述了如何编写一个完整的网站，具体效果可以浏览线上网站：Peekpa.com

从进阶篇开始，每一篇文章都是干货满满，干的不行。这一节，我们来说：如何让我们的网站对用户更加友好，不需要等待时间，利用Django REST Framework和Ajax实现。

Peekpa.com的官方地址：http://peekpa.com

获取整套教程源码唯一途径，关注『皮爷撸码』，回复『peekpa.com』

皮爷的每一篇文章，都配置相对应的代码。这篇文章的代码对应的Tag是“Advanced_10”。

前瞻回顾

上一节课我们已经讲述了如何使用Django REST framework来简单的实现我们的API接口，那么这一节，我们就来解决异步的问题。

不知道大家发现没有，现在几乎我们所有的CMS页面，还有我们数据中心的页面。点击逻辑基本都是点完之后，会有一个比较长的等待时间。

这里的时间是261ms，看似挺快，其实如果遇到数据库读取I/O拥堵，页面逻辑太过复杂，我们这里的数据时间还会更长。

我们这里的请求流程其实是下面这个样子的：

可以看到，请求页面，必须等到所有数据全部返回，一切都准备好之后，才会将结果返回给前端。

并不是像常规网站异步加载一样，点击之后，会有一个loading圈圈一直转，然后数据从后端返回之后在加载出来。

所以，今天我们就要使用Django + Django REST framework + Ajax + ArtTemplate 来实现Django页面的异步加载。

当然，这里小声逼逼一句，之后我们会前后端

结构介绍

上节课，我们通过Django REST framework来修改了我们的地震端口为http://127.0.0.1:8000/center/data/

那么我们就完全可以利用这个接口来实现异步请求。请求流程如下图：

可以看到，请求数据，现将页面返回，然后当页面加载完成之后，再通过Ajax调用后端接口，即上面的Json接口，在接口返回数据后，我们再将数据展示到前端。

技术要点

想要实现上面的流程，主要需要以下技术，放心，我们的文章都会介绍：

• Django REST framework，这个主要负责实现API接口，返回Json数据;
• Ajax，这个主要是在页面加载完成之后的数据请求;
• Art-template，这个主要负责动态的加载展示内容，当然网上还有其他框架可以选择，这里我们就先选择这个Art Template了。

其中，第一个东西我们上节内容已经完成了。所以我们接下里就是要编写JS文件还有HTML文件了。

修改页面

我们这里就拿我们的“日本地震信息”页面来做。首先我们要将我们的页面结构修改一下，将原来的内容展示区域，换成一个loading圈：

<section class="content">
    <div class="container-fluid pt-4">
        {% include 'base/loading.html' %}
        <div class="row" id="content-block">

        </div>
    </div>
</section>

而这个loading.html是这样的：

<div class="flex-fill align-items-center justify-content-center text-center" id="loading-circle">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>