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爬取网易云音乐上评论火爆的歌曲
Jan 19 Python
Python查询IP地址归属完整代码
Jun 21 Python
python线程中同步锁详解
Apr 27 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
Dec 07 Python
python 格式化输出百分号的方法
Jan 20 Python
解决django后台样式丢失,css资源加载失败的问题
Jun 11 Python
python线程安全及多进程多线程实现方法详解
Sep 27 Python
python实现通过队列完成进程间的多任务功能示例
Oct 28 Python
python3 logging日志封装实例
Apr 08 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
Jun 06 Python
python中adb有什么功能
Jun 07 Python
Python绘制数码晶体管日期
Feb 19 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实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
键盘控制事件应用教程大全
2006/11/24 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
如何根据业务封装自己的功能组件
2019/04/19 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
python构造函数init实例方法解析
2020/01/19 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python中Yield的基本用法
2020/10/18 Python
师范院校学生自荐信范文
2013/12/27 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
村党支部换届选举方案
2014/05/02 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
初中地理教学反思
2016/02/19 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
详解jQuery的核心函数和事件处理
2022/02/18 jQuery