素材巴巴 > 程序开发 >

Flask中前端页面的数据刷新

程序开发 2023-09-20 19:33:15

Flask中前端页面的数据刷新

  • 2.前端刷新页面的流程
  • Flask中前端页面的数据刷新

    对于服务器开发工程师来说,前端页面的刷新分后端刷新和前端刷新。
    后端刷新的实现是通过模板+数据的方式实现的。
    前端刷新的实现是通过jQuery的Ajax +jQuery动态加载HTML、CSS的方式实现的。
    不管是后端刷新还是前端刷新,他们都是需要通过HTTP/HTTPS通信协议这种协议实现数据通信,使用请求和响应完成一次完整Web通信的过程。

    1. 后端刷新页面的流程

    1.1实现服务器的API接口文档

    1.2使用Flask实现Web服务器应用程序的构建

    1.3 实现前端请求URL,声明对应Route路由,一般情况下,一个URL对应一个路由

    1.4实现对应路由的视图函数,每一视图函数都需要对应一个试图容器(模板) ,在这个视图函数中进行数据+模板的方式进行服务器的响应

    1.5实现对应模板,模板是通过jinjia2第三方插件的方式,使用模板语法来实现数据的动态显示

    2.前端刷新页面的流程

    2.1实现服务器的API接口文档

    2.2使用Flask实现Web服务器应用程序的构建

    2.3利用jQuery中的Ajax实现前端请求的url(ajax下的url),一般情况下,一个URL对应一个路由

    在这里插入图片描述
    在这里插入图片描述

    2.4声明对应路由,实现对应路由的视图函数,以json的格式将得到的数据响应给浏览器

    在这里插入图片描述

    2.5利用Ajax接收响应,并放入Ajax的seccess的位置

    在这里插入图片描述

    2.6使用jQuery找到放置数据的标签容器,在容器里动态生成标签,放置数据,来实现数据的动态显示


    标签:

    素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。