Django + JQuery + ajax实时显示数据
程序员文章站
2023-11-19 20:48:23
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),
上一篇： 教你几种在网上轻松赚钱的方法
下一篇： 潜在用户分析挖掘与营销