在flask中用ajax实现页面实时更新（轮询）功能——以课表实时更新为例

最新推荐文章于 2026-05-02 08:05:00 发布

原创

最新推荐文章于 2026-05-02 08:05:00 发布 · 5k 阅读

标签

#flask #ajax #python

本文介绍了如何在Flask应用中使用Ajax实现页面的实时更新，以课表实时更新为例，详细讲解了从前置知识到最终实现的全过程，包括时间传递、轮询技术在课表显示中的应用。

一、前置知识——用ajax实现将时间传入HTML界面（用按钮查询）

1. 下载jquery，将其放在static里面

下载地址

2. 写HTML页面，放到template里面，并写对应的视图函数

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮询</title>
</head>
<body>
<h3 align="center">轮询页面</h3>
<h4 id="timenow">当前时间?</h4>
<button id="load">获取时间</button>
</body>
</html>

注意：记得给标签取好id，后面要用。

视图函数：

@app.route('/lunxun')
def lunxun():
    return render_template('lunxun.html')

对应页面

3.调用jquery，按格式写js代码（详见注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮询</title>
</head>
<body>
<h3 align="center">轮询页面</h3>
<h4 id="timenow">当前时间?</h4>
<button id="load">获取时间</button>
<script src="../static/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function (){
     
     
        $('#load').click(function (){
     
                    //load是上面的button的id，这里代表点一下的操作
            $.ajax({
     
     
                url:'/gettime',                     //从gettime这个视图函数获取数据，一会编写
                type:'get',                         //采用get方法
                success:function (t){
     
                    //成功之后的结果，这里的t是从'/gettime'视图函数获得的返回值，如果返回值有多个，可以用json
                    $('#timenow').html("当前时间为"+t)//用“当前时间为：t”代替timenow也就是上面的“当前时间?"
                }
            })
        })
    })
</script>
</body>
</html>

4.完善第三步没有写的那个gettime视图函数

import time
@app.route('/gettime',methods=['GET','POST'])
def gettime():
    return time.ctime()

5.效果展示

在这里插入图片描述

二、轮询初试——用ajax实现将时间传入HTML界面（轮询）

1.对原来的HTML函数稍作修改：

去掉获取时间的那个button键
给实现ajax的那个函数取名为gettime
加一个轮询语句setInterval(gettime,1000)

2.代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"

最低0.47元/天解锁文章