Django + JQuery + ajax实时显示数据

1 创建django项目：NowtimeData and APP ：Demo

>>django-admin startproject NowtimeData

>>python manage.py startapp Demo

2 配置settings.py

①插入Demo

②配置模板路径

　　----BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

　　----TEMPLATES = [

　　　　　　'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')], # 修改模板目录 ]

　　----STATIC_URL = '/static/'

　　　　STATIC_ROOT = os.path.join(BASE_DIR, 'static_collected')

　　----补充　　

　　# LANGUAGE_CODE = 'en-us'
　　LANGUAGE_CODE = 'zh-hans'  # 简体中文

　　# TIME_ZONE = 'UTC'
　　TIME_ZONE = 'Asia/Shanghai'  # 时区

③在APP Demo里创建templates和static，templates里新建ajax_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/api/ajax/" method="get">

        a:<input type="text" name="a" id="a"><br>
        b:<input type="text" name="b" id="b"><br>
        <p>温度:<span id="temp"></span></p>
        <p>湿度:<span id="hum"></span></p>
        <button type="button" id="sum">Calc</button>
    </form>

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>

    setInterval(function () {

    $(document).ready(function () {

               var a = $('#a').val();
               var b = $('#b').val();

               //add是urls.py里的路由
               $.get("/api/ajax/", {'a':a, 'b':b}, function (ret) {
                   //console.log(typeof ret);
                   var data = JSON.parse(ret);
                   //console.log(data[0]["fields"]);

                   //console.log(typeof Number(data[0]["fields"]["temp"]));
                   temp = Number(data[0]["fields"]["temp"]).toFixed(1);
                   hum = Number(data[0]["fields"]["hum"]).toFixed(1);
                   $("#temp").html(temp);
                   $("#hum").html(hum);
               })

        });
},1000);
    </script>
</body>
</html>

或者通过点击事件来触发

<script>

$(document).ready(function () {
     $("#sum").click(function () {
         var d = $('#d').val();
         var e = $('#e').val();
         //add是urls.py里的路由
         $.get("/add/", {'d': d, 'e': e}, function (ret) {
             {#console.log(typeof ret);#}
             console.log(ret);
             $("#result").html(ret);
         })
     })

    });

</script>

④在view.py中编辑代码

　　def adder(request):
   　　 # a = request.GET['a']
   　　 # b = request.GET['b']
 　　   # a = random.randint(1, 10)
  　　  # b = random.randint(1, 10)
  　　  # c = int(a)+int(b)
   　　 return render(request, 'ajax_test.html')

⑤建立数据api接口 api.py

from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.decorators import api_view
from website.models import Room, Recv_data, Send_data  # 得到数据库
from django.http import HttpResponse, JsonResponse

class Room_Admin(serializers.ModelSerializer):
    class Meta:
        depth = 1
        model = Room
        fields = '__all__'

class Recv_Admin(serializers.ModelSerializer):
    class Meta:
        depth = 1
        model = Recv_data
        fields = '__all__'

class Send_Admin(serializers.ModelSerializer):
    class Meta:
        depth = 1
        model = Send_data
        fields = '__all__'

from django.core.serializers import serialize
@api_view(['GET', 'POST'])
def ajaxData(request):        # 在url.py里添加路由

    # 房间管理
    room_data = Room.objects.all()
    roomData= Room_Admin(room_data, many=True)

    recv_data = Recv_data.objects.all()
    recvData = Recv_Admin(recv_data, many=True)

    send_data = Send_data.objects.all()
    sendData = Send_Admin(send_data, many=True)

    room2_info = Recv_data.objects.filter(floor=2)
    room3_info = Recv_data.objects.filter(floor=3)
    room4_info = Recv_data.objects.filter(floor=4)
    room5_info = Recv_data.objects.filter(floor=5)
    room6_info = Recv_data.objects.filter(floor=6)
    room2_info = serialize('json', room2_info, fields=['room', 'temp', 'status', 'mode', 'level', 'hum', 'co2', 'pm25', 'tvoc'])
    room3_info = serialize('json', room3_info, fields=['room', 'temp', 'status', 'mode', 'level', 'hum', 'co2', 'pm25', 'tvoc'])
    room4_info = serialize('json', room4_info, fields=['room', 'temp', 'status', 'mode', 'level', 'hum', 'co2', 'pm25', 'tvoc'])
    room5_info = serialize('json', room5_info, fields=['room', 'temp', 'status', 'mode', 'level', 'hum', 'co2', 'pm25', 'tvoc'])
    room6_info = serialize('json', room6_info, fields=['room', 'temp', 'status', 'mode', 'level', 'hum', 'co2', 'pm25', 'tvoc'])
    # print(room2_info)

    # return Response({'room_admin': roomData.data, 'recv_data': recvData.data, 'send_data': sendData.data})
    # return HttpResponse(str({'room_admin': roomData.data, 'recv_data': recvData.data, 'send_data': sendData.data}))
    return HttpResponse(room2_info)

⑥ 添加url.py

　　path('add/', views.adder),

　　path('api/ajax/', api.ajaxData),

⑦补充js for循环写数据

 setInterval(function () {

    $(document).ready(function () {

               var a = $('#a').val();
               var b = $('#b').val();

               //add是urls.py里的路由
               $.get("/api/ajax/", {'a':a, 'b':b}, function (ret) {
                   //console.log(typeof ret);
                   var data = JSON.parse(ret);
                   //console.log(data[0]["fields"]);
                   function room(room, a){

                        var temp = Number(data[a]["fields"]["temp"]).toFixed(1);
                        var status = data[a]["fields"]["status"];
                        if (status=='0'){
                            status="关";
                            $("#"+room).css({"background": "green"});
                            }
                        else if (status=='1'){
                            status='开';
                            $("#"+room).css({"background": "grey"});

                        }
                        else {
                            status='未知';
                            $("#"+room).css({"background": "purple"});
                        }
                        $("#temp_"+room).html(temp);
                        $("#status_"+room).html(status);

                    }

                   for (var i=8206;i<8230;i++){
                       room(i,i-8201)
                   }

               })

        });
},1000);

Django + JQuery + ajax实时显示数据的更多相关文章

jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码代码如 ...
实时显示数据 SignalR 及时消息提醒（立即向其推送内容）
实时显示数据 SignalR 及时消息提醒( 立即向其推送内容) http://www.cnblogs.com/Leo_wl/p/5634910.html <!--Reference the ...
Django之AJAX传输JSON数据
目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...
练习 jquery+Ajax+Json 绑定数据分类： asp.net 练习 jquery+Ajax+Json 绑定数据分类： asp.net
练习 jquery+Ajax+Json 绑定数据
异步上传文件，jquery+ajax，显示进度条
根据网上的资料,做了很多修改,结果发现使用ajax上传数据时若要监听xhr.upload.addEventListener("progress",functiion(e),fals ...
Jquery Ajax 提交json数据
在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...
使用jQuery AJAX读取二进制数据
READING BINARY DATA USING JQUERY AJAX http://www.henryalgus.com/reading-binary-files-using-jquery-aj ...
django admin后台编辑页面显示数据公式
先用django markdownx进行实时预览, 然后在 /Library/Python/2.7/site-packages/django/contrib/admin 这个目录下,加入 <sc ...
php+ajax+jquery分页并显示数据
参考https://www.helloweba.com/view-blog-195.html html页面 <div class="weui-cells" id=" ...

随机推荐

nginx文件名逻辑漏洞_CVE-2013-4547漏洞复现
nginx文件名逻辑漏洞_CVE-2013-4547漏洞复现一.漏洞描述这个漏洞其实和代码执行没有太大的关系,主要原因是错误地解析了请求的URL,错误地获取到用户请求的文件名,导致出现权限绕过.代 ...
VS Code 安装 LeetCode 插件
练习算法绕不开的一个网站就是力扣,很多小伙伴为了拿到大厂 offer,刷题都刷到吐了. 然而如果直接在 LeetCode 上写代码,那是很痛苦的一件事,那就相当于用 txt 写代码一样,没有 IDE ...
context创建过程解析（一）之deployDescriptors
总结:主要是创建Context对象,并且将默认context配置,host级别配置,context配置的值设置进去,设置docBase,如果是war包就解压到webapp的目录中,重新设置docBas ...
springboot+kafka+邮件发送（最佳实践）
导读集成spring-kafka,生产者生产邮件message,消费者负责发送引入线程池,多线程发送消息多邮件服务器配置定时任务生产消息:计划邮件发送实现过程导入依赖 <proper ...
codeforces 322 A Ciel and Dancing
题目链接题意: 有n个男孩和m个女孩,他们要结对跳舞,每对要有一个女孩和一个男孩,而且其中一个要求之前没有和其他人结对,求出最大可以结多少对. 如图,一条线代表一对,只有这样三种情况. #inclu ...
Laravel 命令行工具之多线程同步大批量数据 DB连接混乱解决方案
记一次大批量数据的多进程同步背景:因为公司的用户标识不完整,所以需要从集团同步一次用户标记数据,用户数据来源是微信,数量级为一百五十万,集团用户数量级为六百万方案确定下来是集团开了一个查询接口,访 ...
【python-Django开发】Django 配置MySQL数据库讲解！！！
官方文档请阅读:https://docs.djangoproject.com/en/1.11/ref/databases/#mysql-db-api-drivers 配置MySQL数据库 1. 新建M ...
重入锁的学习（ReentrantLock）
重入锁 :(ReentrantLock) 上锁用reentrantLock.lock 方法解锁用reentrantLock.unlock 方法上锁和解锁必须配对可以多重上锁 Reentr ...
c#将字符串转化为合理的文件名
string name = System.Text.RegularExpressions.Regex.Replace(url, "[<>/\\|:\"?*]" ...
lvs+keepalived 高可用及负载均衡
一.环境准备 VIP:10.18.43.30 dr1:10.18.43.10 dr2:10.18.43.20 web1:10.18.43.13 web2:10.18.43.14 结构图 (一).预处理 ...

Django + JQuery + ajax实时显示数据

Django + JQuery + ajax实时显示数据的更多相关文章

随机推荐

热门专题