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 Django框架实现自定义表单提交
Mar 25 Python
python实现汉诺塔方法汇总
Jul 25 Python
Python读取sqlite数据库文件的方法分析
Aug 07 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
Feb 13 Python
numpy.transpose对三维数组的转置方法
Apr 17 Python
python操作mysql代码总结
Jun 01 Python
用Python实现BP神经网络(附代码)
Jul 10 Python
Python:slice与indices的用法
Nov 25 Python
Python制作简易版小工具之计算天数的实现思路
Feb 13 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
Apr 08 Python
Vs Code中8个好用的python 扩展插件
Oct 12 Python
pytorch下的unsqueeze和squeeze的用法说明
Feb 06 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制作图型计数器的例子
2006/10/09 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python map和reduce函数用法示例
2015/02/26 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
WxPython实现无边框界面
2019/11/18 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Python如何进行时间处理
2020/08/06 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
员工自我鉴定范文
2013/10/06 职场文书
教师实习自我鉴定
2013/12/14 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
实习单位证明范例
2014/11/17 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js