使用 Python 从 0 开发属于你的个人管理系统 27 | Flask中如何使用 jquery 刷新局部页面

在开发你的项目时,你会发现有些页面的功能只需要刷新局部数据就可以了,不需要整个页面都刷新,比如接下来我要给你演示的这个「计划功能」:

如何实现局部刷新?

像这种,在大计划下创建相关的小计划,以及任务完成进度条随着小计划完成的变化等操作,都是需要将数据提交到后端,并在当前页面刷新最新的数据。

那么如何实现呢?接下来我就给你演示一下。

创建小计划

因为是局部数据请求,我们需要用到 JavaScript 来实现,而 Jquery 是 JavaScript 更轻量级的框架,我们可以使用它更方便操作。

在你的 footer 页面中导入它:

<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>

接着在你的静态文件夹下创建一个 js 文件专门来写请求,在 footer 下也要导入才会被用到:

<script src="{{ url_for('static', filename='js/todo.js') }}"></script>

在前端页面中,创建子计划的主要代码如下:

本文隐藏内容 登陆 后才可以浏览
这里我们改变了计划的状态之后,还去获取了「当前大计划下的所有子计划数量」和「当前大计划下的完成的计划数量」,然后返回。

那么这时候 js 中的 data 就可以获取到它们,然后把它们更新到 HTML 中去:

function onCheck(){
    id = $(this).data("todo-id")
    progressbarid = $(this).val()
    $.post("/todo/change/"+id, function(data){
        $("#progerssbar" + progressbarid).attr('aria-valuenow', data.done)
        $("#progerssbar" + progressbarid).attr('aria-valuemax', data.all)
     	$("#progerssbar" + progressbarid).attr('style', 'width: '+data.done/data.all*100+'%')
    });
}

可以看到这里,通过 attr 方法可以拿到当前页面的相关属性,并更新新的数据,那么这样就可以实现一开始你看到的进度条更新了。

这就是局部刷新的实现方式,你只要按照上面说的局部刷新的流程,就可以一步一步实现啦。

2 Replies to “使用 Python 从 0 开发属于你的个人管理系统 27 | Flask中如何使用 jquery 刷新局部页面”

  1. tao说道:

    ……在大计划下创建相关的小计划,……问题是现在连这个??都没实现

    1. 小帅b说道:

      嗯,你可以试着自己实现一下,把遇到的问题记录下来,我把「数据填充」给你们说明白后,很快就会把项目源代码发给你们啦。

发表回复