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

前言

这部分已经折腾我两天了，还是没有头绪，可能还会折腾更久，最后在第三天上午解决问题，在一个不起眼的地方被坑了，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 动态数据显示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Django+Ajax+jQuery实现网页动态更新的实例

    views.py中的修改 增加相应的请求处理函数: def getdevjson(request): print 'get here' if ('key' in request.GET): searchkey = request.GET.get('key') return JsonResponse(search(searchkey)) else: return HttpResponse('Sorry!') 返回字符串中,既可以使用from django.http import JsonRespo

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

    前言 这部分已经折腾我两天了,还是没有头绪,可能还会折腾更久,最后在第三天上午解决问题,在一个不起眼的地方被坑了,jQuery加载的问题.会者不难,难者不会,希望后面人少走弯路吧 环境 windows10 pycharm2017.3.3 professional edition python3.6.4 django2.0.2 方法 创建后台读取数据函数,用于后台从数据库读取数据.在views.py文件内增加以下代码 from django.http import JsonResponse def

  • Django Channel实时推送与聊天的示例代码

    先来看一下最终的效果吧 开始聊天,输入消息并点击发送消息就可以开始聊天了 点击 "获取后端数据"开启实时推送 先来简单了解一下 Django Channel Channels是一个采用Django并将其功能扩展到HTTP以外的项目,以处理WebSocket,聊天协议,IoT协议等.它基于称为ASGI的Python规范构建. 它以Django的核心为基础,并在其下面分层了一个完全异步的层,以同步模式运行Django本身,但异步处理了连接和套接字,并提供了以两种方式编写的选择,从而实现了这

  • JavaScript实现网页视频添加水印的示例代码

    JavaScript实现网页视频添加水印的示例代码

    目录 示例图 原理 代码示例 示例图 原理 通过html的页面布局,在video播放器层面,通过js控制dom,插入文本水印代码. 代码示例 index.html <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit" /> <meta http-equiv="Content-Type" content=&quo

  • 史上最简单的MyBatis动态SQL入门示例代码

    假如有如下的关于书籍基本信息的表: DROP DATABASE IF EXISTS `books`; CREATE DATABASE `books`; USE books; DROP TABLE IF EXISTS `book`; CREATE TABLE `book` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(128) DEFAULT NULL, `author` varchar(64) DEFAULT NULL, `pres

  • Django 实现Admin自动填充当前用户的示例代码

    model.py import datetime from django.contrib.auth.models import User from django.db import models class Entry(models.Model): title = models.CharField(max_length=250) slug = models.SlugField() pub_date = models.DateTimeField(default=datetime.datetime.

  • django在保存图像的同时压缩图像示例代码详解

    假设我们有一个非常简单的Post模型,它将是一个图像及其描述, from django.db import models class Post(models.Model): text = models.TextField() image = models.ImageField(upload_to='images/') 但是我们要优化图像大小,这将由我们Post的image字段指出. 这样做有充分的理由-它有助于更快地加载网站/应用程序并减少我们的服务器存储. 在使用Django之前,首先让我们简

  • jQuery 动态粒子效果示例代码

    1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho

  • Element实现动态表格的示例代码

    Element实现动态表格的示例代码

    目录 [代码背景] [代码实现] #1# -> 代码复用的基础是你需要一个可复用的组件 #2# -> 在展示页面使用动态表格组件 #3# -> 如何给动态表格根据需求动态添加序号列/索引列 [代码背景] 有这样一个业务需求场景,有大概十几张表归属于某个类别,用户希望在同一个页面,通过选择不同的查询指标展示不同的表格,这些表的表头样式类似但是又不完全相同,怎么做呢? 到目前为止所有基于Element UI的表格样式都是直接在页面写死的,像官方这样: <el-table :data=&

  • python通过pillow识别动态验证码的示例代码

    python通过pillow识别动态验证码的示例代码

    目录 环境配置  安装 pillow(PIL)库 识别过程 生活中,我们在登录微博,邮箱的时候,常常会碰到验证码.在工作时,如果想要爬取一些数据,也会碰到验证码的阻碍.本次试验将带领大家认识验证码的一些特性,并利用 Python 中的 pillow 库完成对验证码的破解. 环境配置 Python 2.7 Pillow 模块 有个问题就是python2.7目前只能让使用到2020年,现在再利用2.7下载好多东西都会报错,也该是时候更新到python3.7了,本文还是依赖于2.7的环境. 识别验证码

  • Mybatis动态SQL的示例代码

    目录 基本流程 IF,Where Set Choose(when,otherwise) SQL片段 总结 什么是动态SQL:动态SQL就是根据不同的条件生成不同的SQL语句 基本流程 1,数据库准备一张表 2,导包 3,编写核心配置文件 4,编写实体类 5,编写实体类对应的Mapper和Mapper.xml文件 6,在核心配置文件中注册Mapper.xml 7,测试 开启自动驼峰命名规则映射 <!--开启驼峰命名映射--> <setting name="mapUnderscor

随机推荐