⽹页数据如何实现实时刷新？
本⽂仅为学技术⽽简单举例，后端框架是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、主要⽤到的⽅法如下，具体也可以看注释
4、后端返回来是字符串，需要⽤到JSON.parse转成前端对象
var socket = new WebSocket("ws:" + window.location.host + "/web/webtask_stu/");
open');//成功连接上Websocket    socket.send('adasdasda。。。。');//发送数据到服务端 }; ssage
= 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,function (i,ele) {
$(ele).find("td:eq(4)").text(webtask_stu_list["webtask_stu"][i])  }); }; lose=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，有兴趣可以⽹上看看学习。前端websocket怎么用

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。