html前台数据自动更新,网页数据如何实现实时刷新?
本文仅为学技术而简单举例,后端框架是Django,具体业务逻辑是否合理可以不用管,下方是工作中需要实现的需求
自动化程序脚本运行的三种任务状态:
1、未执行 2、执行成功 3、执行失败
任务状态在网页前端实时展示,需要每隔一段时间请求数据库中的状态数据字段为webtask_stu,并返回前端展示
两种思路:
1、前端轮询,每请求一次,建立一次连接,后端返回前端数据一次
具体实现:设置定时器,每隔5s请求后端数据,后端返回数据后渲染前端
2、前端请求只建立一次连接,后端能持续主动向前端推送数据
具体实现:前端通过socket方式向后端建立连接,后端定时查询数据库数据,主动向前端推送,这种优点很明显,可以减少网络请求次数
方式一:Ajax定时请求:
1、前端设置定时器setInterval,定时器里面传ajax请求函数和时间
function get_stu_list(){
param = {}; $.post("/web/webtask_stu/",param,function(data){ var webtask_tu_list = data.webtask_stu; console.log(webtask_tu_list); var tr = $("tbody tr"); $.each(tr,function (i,ele) { $(ele).find("td:eq(4)").text(webtask_tu_list[i]) }); });};setInterval(get_stu_list,5000);
后端也很简单,查询数据以JSonResponse返回即可
@csrf_exempt
def webtask_stu(request): webtasks = Webtask.objects.all() webtask_stu_list = [] for webtask in webtasks: webtask_stu_list.append(webtask.webtask_stu) dit = {‘webtask_stu‘: webtask_stu_list} print(webtask_stu_list) return JsonResponse(dit)
方式二、websocket
效果图如下,后端持续向前端推送数据,前端控制台输出演示
1、前端部分构造socket连接对象,协议就是websocket协议了,不是http协议,所以前面用ws开头
2、windows.loaction.host可以获取域名(包括端口)
3、主要用到的方法如下,具体也可以看注释
socket.onopen : 成功连接
socket.onmessage : 成功获取后端返回的数据,通过jquery渲染后端返回的状态数据实现刷新效果
socket.onclose:连接失效
4、后端返回来是字符串,需要用到JSON.parse转成前端对象
var socket = new WebSocket("ws:" + window.location.host + "/web/webtask_stu/");
socket.onopen = function () { console.log(‘WebSocket open‘);//成功连接上Websocket socket.send(‘adasdasda。。。。‘);//发送数据到服务端 }; socket.onmessage = function (e) { // console.log(‘message: ‘ + e.data);//打印服务端返回的数据 // console.log(typeof (e.data)); console.log(JSON.parse(e.data)); // console.log(typeof (JSON.parse(e.data))); var webtask_stu_list = JSON.parse(e.data); var tr = $("tbody tr"); $.each(tr,ele) { $(ele).find("td:eq(4)").text(webtask_stu_list["webtask_stu"][i]) }); }; socket.onclose=function(e){ console.log(e); socket.close(); //关闭TCP连接 };
后端Django部分:
1、django项目的话安装dwebsocket,pip install dwebsocket ,并在代码中导入
from dwebsocket.decorators import accept_websocket
2、加装饰器@accept_websocket,接收socket请求
3、if request.is_websocket,判断是否是websocket请求是的话执行我们后端的从数据库查询数据的功能
4、通过time.sleep和while循环实现每隔5秒向前端发送数据
4、request.websocket.send(json数据)返回数据到前端,因为这里是json数据格式,所以前端上面要用JSON.parse转对象,
@accept_websocket
def webtask_stu(request): if request.is_websocket(): while 1: webtasks = Webtask.objects.all() webtask_stu_list = [] for webtask in webtasks: webtask_stu_list.append(webtask.webtask_stu) dit = {‘webtask_stu‘: webtask_stu_list} time.sleep(5) request.websocket.send(json.dumps(dit))
两种思路大致如上,实现socket还有其他更高级的api,有兴趣可以网上看看学习。
html前台数据自动更新,网页数据如何实现实时刷新?相关推荐
- pyqt tableview大数据自动退出_JAVAFX之tableview界面实时刷新导致的内存溢出(自己挖的坑,爬着也要出来啊0.0)...
Linux编程点击右侧关注,免费入门到精通! 黑客技术点击右侧关注,了解黑客的世界! 作者丨队长给我球. https://www.cnblogs.com/JJJ1990/p/9111199.html ...
- MySQL删除退出后数据未更新,mysql一不小心删除了数据或更新了数据没有加where 条件...
mysql一不小心删除了数据或更新了数据没有加where 条件 1,show variables like '%log_bin%'; 2.show master logs; 3.show master ...
- excel数据自动录入网页_Excel自动抓取网页数据,数据抓取一键搞定
网站上的数据源是我们进行统计分析的重要信息源.我们在生活中常常听到一个词叫"爬虫",能够快速抓取网页上的数据,这对于数据分析相关工作来说极其重要,也是必备的技能之一.但是爬虫大多需 ...
- excel自动排班表_Excel数据分析-如何制作自动更新的数据透视表
数据透视表是我们工作中一个非常强大的数据汇总分析功能,大家一定会遇到这样的问题,就是数据源如果每天或者经常性需要更新的话,那么我们的数据透视表就要在每次更新后重新选择数据源,如何能让数据源自动更新呢? ...
- html 自动更新报告,自动更新的数据报表,让你告别重复的日报、周报、月报
关于企业各式各样报表制作的繁琐,相信报表制作者很有发言权,我们用一个模拟场景看看. 一.场景模拟 管理者:我想做一个库存情况分析,你看看有空的时候安排下. 报表制作者:好的. 过了几个小时...... ...
- 怎么用vue自动更新页面数据
<body><div id="app"><div>欢迎:{{name}}</div><!-- {{}}就是插值语法相当于模板字 ...
- aws python库_如何使用Python,AWS和IEX Cloud创建自动更新股市数据的Excel电子表格
aws python库 Many Python developers in the financial world are tasked with creating Excel documents f ...
- Access和SQL server开启表间关系,并实现更新或删除母表数据自动更新或删除子表数据...
1.Access开启表间关系,并实现删除母表数据自动删除子表数据: 在Tables等界面 - > 右键 - > Relationships... -> 弹出Relationships ...
- java 网页数据_JAVA获取网页数据
很多时候用到抓取网页数据的功能,以前工作中曾经用到过,今天总结了一下: 1.抓取网页数据通过指定的URL,获得页面信息,进而对页面用DOM进行 NODE分析,处理得到原始HTML数据,这样做的优势在于 ...
最新文章
- 浅析 VO、DTO、DO、PO 的概念、区别和用处!
- [性能优化]UITableView性能优化的一点感悟及计算UILabel高度的新方法
- [翻译]API Guides - Bound Services
- shell 中去掉末尾换行符
- 个人博客网站html源码_最新0成本简单使用CODING Pages搭建Gridea个人博客网站详细教程...
- 最新 Python 爬虫利器!
- Node:正则验证手机号和身份证号
- fantastical2语言设置_如何为iPhone定制Fantastical2以适应您的需求
- 中国移动通信研究院笔试题2
- 邮件服务器 文件服务器,搭建邮件、终端和文件服务器应用方案
- 什么软件测试显卡故障,Win7电脑显卡故障怎样检测软件的方法
- 市面上最适合跑步用的耳机有哪些、分享五款最优秀的跑步耳机
- idea中打开maven的setting.xml
- DNS服务器轮询的验证
- 【5G架构】5G 接入网架构概述
- 嵌入式linux 忘了密码,如何在Linux下解除PDF文件的密码?
- Android支付接入(7):Google In-app-Billing
- 路径名是Linux独有的实现,Linux路径名查找过程分析
- P5266 【深基17.例6】学籍管理
- 小程序 房租水电费记录管理_房租水电费每月收费表-房东必备
热门文章
- 最新ICCV 2021 | 虚拟试衣(21)图像编辑-文本引导(22)图像编辑-单样本(23)生成对抗GAN...
- 你了解c++中的关键字virtual吗?
- 【SCI征稿】大数据类SCI,走期刊部系统,正刊,审稿顺利
- USB Type-C的基本原理
- HP存储raid5两块硬盘离线lvm下vxfs文件系统恢复数据方案
- dreamspark 注册,wp7 app hub微软手机开发者帐号(全新3步注册)
- LifeKeeper 6.0 for Windows
- Datawhale 《南瓜书》
- 多普达565 GPRS上网设置方法(搞这个头都大了)
- 计算机的假桌面,给电脑桌面放个假!极品桌面抢先评测