Django与AJAX实现网页动态数据显示的示例代码


Posted in Python onFebruary 24, 2021

前言

这部分已经折腾我两天了,还是没有头绪,可能还会折腾更久,最后在第三天上午解决问题,在一个不起眼的地方被坑了,jQuery加载的问题。会者不难,难者不会,希望后面人少走弯路吧

环境

  • windows10
  • pycharm2017.3.3 professional edition
  • python3.6.4
  • django2.0.2

方法

创建后台读取数据函数,用于后台从数据库读取数据。在views.py文件内增加以下代码

from django.http import JsonResponse

def data_fresh(request):
  context = {"data1": Test.objects.order_by("-time")[0].temp1,
        "data2": Test.objects.order_by("-time")[0].temp2}
  return JsonResponse(context)
  • data_fresh是函数名
  • Test是Django项目下的模型
  • order_by(“-time”)[0]指按时间列倒序排列并取第一行数据
  • temp1是第一行数据里的temp1数据

如果没有数据库数据的话,直接写成固定的数据用来测试也是可以的

加载函数,让HTML页面能够访问到函数。在urls.py添加一下代码

urlpatterns = [
  path('data_fresh/', views.data_fresh, name="data_fresh"),
]

前端使用jQuery访问后台函数,要实现数据动态显示,还需要增加定时程序,在HTML页面插入以下代码

<script>
  $(document).ready(function(){
    function refresh(){
      $.getJSON("/data_fresh/", function (ret) {
        $('#result').html(ret.data1);
        $('#result2').html(ret.data2);
      })
    }
    setInterval(refresh, 3000)
  })
</script>

上面的程序将第1步里的temp1和temp2写入id为result1和result2的标签里

到此这篇关于Django与AJAX实现网页动态数据显示的示例代码的文章就介绍到这了,更多相关Django AJAX 动态数据显示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python正则分析nginx的访问日志
Jan 17 Python
python编程实现随机生成多个椭圆实例代码
Jan 03 Python
Python之dict(或对象)与json之间的互相转化实例
Jun 05 Python
详谈Pandas中iloc和loc以及ix的区别
Jun 08 Python
python实现自动登录
Sep 17 Python
Python检查和同步本地时间(北京时间)的实现方法
Dec 03 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
Dec 12 Python
Win10系统下安装labelme及json文件批量转化方法
Jul 30 Python
flask 框架操作MySQL数据库简单示例
Feb 02 Python
基于pycharm实现批量修改变量名
Jun 02 Python
浅谈Python中的模块
Jun 10 Python
python在协程中增加任务实例操作
Feb 28 Python
一文读懂python Scrapy爬虫框架
Feb 24 #Python
Django如何重置migration的几种情景
Feb 24 #Python
Django中的DateTimeField和DateField实现
Feb 24 #Python
Python制作运行进度条的实现效果(代码运行不无聊)
Feb 24 #Python
学点简单的Django之第一个Django程序的实现
Feb 24 #Python
python单例模式的应用场景实例讲解
Feb 24 #Python
python编写扎金花小程序的实例代码
Feb 23 #Python
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现CET查分的方法
2015/03/10 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python实现简单图片物体标注工具
2019/03/18 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
pymysql模块的操作实例
2019/12/17 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
九年级物理教学反思
2014/01/29 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
新兵入伍心得体会
2014/09/04 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
感谢信格式范文
2015/01/22 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers