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 getopt模块处理命令行选项实例
May 13 Python
Python通过future处理并发问题
Oct 17 Python
Python语言描述机器学习之Logistic回归算法
Dec 21 Python
详解Python中如何写控制台进度条的整理
Mar 07 Python
基于Python log 的正确打开方式
Apr 28 Python
numpy ndarray 取出满足特定条件的某些行实例
Dec 05 Python
Spring实战之使用util:命名空间简化配置操作示例
Dec 09 Python
Pytorch GPU显存充足却显示out of memory的解决方式
Jan 13 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
Aug 31 Python
Pycharm添加虚拟解释器报错问题解决方案
Oct 13 Python
Linux系统下升级pip的完整步骤
Jan 31 Python
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
Mar 29 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
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php跨站攻击实例分析
2014/10/28 PHP
php比较相似字符串的方法
2015/06/05 PHP
php实现的日历程序
2015/06/18 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JavaScript函数详解
2014/11/17 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python @property的用法及含义全面解析
2018/02/01 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python求最大值最小值方法总结
2019/06/25 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
档案管理员岗位职责
2013/12/01 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
学校搬迁方案
2014/06/15 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
股东合作协议书
2014/09/12 职场文书
设备技术员岗位职责
2015/04/11 职场文书