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=" ...
随机推荐
- PowerBI Desktop中如何能实现点击按钮跳转到相应报表页
我看到过一个报表首页,它将其他报表业存为一种类似URL的方式,按住Ctrl点击鼠标右键即可跳到相应的报表业. 当时我理解成了是“分页报表”的功能实现的,弄明白后发现是由按钮+书签的方式是实现的. 实现 ...
- Python_Day1_人人都爱列表
列表由一系列按特定顺序排列的元素组成.你可以创建包含字母表中所有字母.数字0~9或 所有家庭成员姓名的列表;也可以将任何东西加入列表中,其中的元素之间可以没有任何关系. 鉴于列表通常包含多个元素,给列 ...
- JSP+java上传图片到服务器，并将地址保存至MYSQL + JSP网页显示服务器的图片
这两天遇到个需求——用户头像修改功能. 查了好多资料,不是代码不全,就是某些高端框架,卡了好久,今已实现,分享给大家,如果有更好的方法,非常感谢可以在下方评论区写出 一.整体项目架构 二.web.xm ...
- 用margin还是padding ？
margin是用来隔开元素与元素的间距:padding是用来隔开元素与内容的间隔. margin用于布局分开元素使元素与元素互不相干:padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元 ...
- centos7更新yum库为aliyun库
1. 备份原来的yum源$sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置ali ...
- springboot+kafka+邮件发送（最佳实践）
导读 集成spring-kafka,生产者生产邮件message,消费者负责发送 引入线程池,多线程发送消息 多邮件服务器配置 定时任务生产消息:计划邮件发送 实现过程 导入依赖 <proper ...
- Gunicorn-Django部署
1. 简单部署 1. sudo pip3 install gunicorn 2. cd 到django项目中 sudo python3 manage.py migrate 3.启动服务:sudo py ...
- 深入Apache NiFi 之源码学习
前言 要问 Hortonworks 这家公司最有产品力的产品是什么,我觉得是 Apache NiFi.去年Cloudera 和 Hortonworks 合并之后,以 Cloudera 为主,两家公司进 ...
- kafka同步异步消费和消息的偏移量（四）
1. 消费者位置(consumer position) 因为kafka服务端不保存消息的状态,所以消费端需要自己去做很多事情.我们每次调用poll()方法他总是返回已经保存在生产者队列中还未被消费者消 ...
- ccf 201809-4 再卖菜
这题一开始不知道剪枝这种操作,只会傻傻地dfs. 然后dfs递归写80分超时,非递归写70分超时(纳尼?我一直以为非递归算法在时间上会更优秀一些,为什么会这样?!!) 剪一下枝就都能过了 #inclu ...