欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Django + JQuery + ajax实时显示数据

程序员文章站 2022-07-21 15:47:07
1 创建django项目 ：NowtimeData and APP ：Demo >>django-admin startproject NowtimeData >>python manage.py startapp Demo 2 配置settings.py ①插入Demo ②配置模板路径 BASE_ ......

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>

 

④在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),


 

上一篇： Axure RP 8怎么控制矩形元件颠倒旋转?

下一篇： JavaScript实现全选反选

推荐阅读