//把数据传到路径为/airCdt/的django后端函数进行数据处理
onSubmit(){
const dict={
'floor': this.formLabelAlign.floor,
'room': this.formLabelAlign.room,
'status': this.formLabelAlign.status,
'mode': this.formLabelAlign.mode,
'temp': this.formLabelAlign.temp,
'level': this.formLabelAlign.level,
};
$.get("/airCdt/", dict, function (ret) { // console.log(ret);
$("#respond").html(ret);
}); }, //获得数据
$.get("/api/floor2_ajax/", (ret) =>{
var data = JSON.parse(ret);
this.tableData[3]["data"] = Number(data[room-1]["fields"]["temp"]).toFixed(1);
localStorage.setItem("temp_8229",this.tableData[3]["data"]);
var status = data[room-1]["fields"]["status"];
if (status =='0'){
this.tableData[0]["data"] = '关';
}
else if(status =='1'){
this.tableData[0]["data"] = '开';
}
else{this.tableData[0]["data"]='未知';}
localStorage.setItem("status_8229",this.tableData[0]["data"]);
var mode = data[room-1]["fields"]["mode"];
if (mode =='1'){
this.tableData[1]["data"] = '制热';
}
else if(mode =='2'){
this.tableData[1]["data"] = '制冷';
}
else if(mode=='3'){
this.tableData[1]["data"] = '除湿';
}
else{this.tableData[1]["data"] = '未知';}
localStorage.setItem("mode_8229",this.tableData[1]["data"]);
var level = data[room-1]["fields"]["level"];
if (level =='1'){
this.tableData[2]["data"] = '低速';
}
else if(level =='2'){
this.tableData[2]["data"] = '中速';
}
else if(level=='3'){
this.tableData[2]["data"] = '高速';
}
else if(level=='4'){
this.tableData[2]["data"]= '自动';
}
else{this.tableData[2]["data"] = '未知';}
localStorage.setItem("level_8229",this.tableData[2]["data"]);
this.tableData[5]["data"] = data[room-1]["fields"]["co2"];
localStorage.setItem("co2_8229",this.tableData[5]["data"]);
this.tableData[7]["data"] = Number(data[room-1]["fields"]["tvoc"]).toFixed(3);
localStorage.setItem("tvoc_8229",this.tableData[7]["data"]);
this.tableData[4]["data"] = Number(data[room-1]["fields"]["hum"]).toFixed(1);
localStorage.setItem("hum_8229",this.tableData[4]["data"]);
this.tableData[6]["data"] = data[room-1]["fields"]["pm25"];
localStorage.setItem("pm25_8229",this.tableData[6]["data"]);
})
# 发送给前端的每层楼的ajax数据路由
path('api/floor2_ajax/', api.floor2_Data),
path('floor2/', views.floor2),
path('api/floor3_ajax/', api.floor3_Data),
path('floor3/', views.floor3),
path('api/floor4_ajax/', api.floor4_Data),
path('floor4/', views.floor4),
path('api/floor5_ajax/', api.floor5_Data),
path('floor5/', views.floor5),
path('api/floor6_ajax/', api.floor6_Data),
path('floor6/', views.floor6),
path('test/', views.TesT),
# 接收前端数据的路由
path('airCdt/', views.airCdt),
path('freshAir/', views.freshAir), 视图中的view
# 获得前端数据
def airCdt(request): floor = request.GET['floor']
room = request.GET['room']
status = request.GET['status']
mode = request.GET['mode']
temp = request.GET['temp']
level = request.GET['level']
print(floor, room, status, mode, temp, level)
  # 进行数据处理
return HttpResponse("空调ok")

vue前端与django后端数据交互的更多相关文章

  1. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  2. 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  3. 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  4. vue-resource的使用,前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  5. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  6. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  7. Charles——前端必备模拟后端数据

    Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...

  8. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

  9. 前后端数据交互(八)——请求方法 GET 和 POST 区别

    WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...

随机推荐

  1. dll的封装和使用

    背景 在windows平台下,要实现函数的封装,一般采用的是dll动态库的形式 实现了函数的封装就意味着实现过程的隐藏 可以实现跨平台和跨语言的使用 实施步骤 生成dll动态库 在VS中生成新项目,应 ...

  2. idea导入eclipse的web项目

    idea导入eclipse的web项目 一.导入自己的web项目      步骤:File->New->Project from Existing Source... 二.选择项目的所在位 ...

  3. [转帖]规模化敏捷-简要对比SAFe、LeSS和DAD模式

    规模化敏捷-简要对比SAFe.LeSS和DAD模式 http://blog.sina.com.cn//s/blog_15e1409550102x5yx.html   分类: 敏捷开发 目前有三种将Sc ...

  4. Eclipse中导入Maven Web项目并配置其在Tomcat中运行

    今天因为实习的关系需要讲公司已经开发的项目导入进Eclipse,而公司的项目是用Maven来构建的所以,需要将Maven项目导入进Eclipse下. 自己因为没有什么经验所以搞了得两个多小时,在这里和 ...

  5. C++多线程基础学习笔记(一)

    下面分三个方面多线程技术的必须掌握一些基本知识. 1.进程 2.线程 3.并发 (1)进程 一个可执行程序运行起来了,即为创建了一个进程.如在电脑上打开了word,就创建了一个word进程,打开QQ, ...

  6. 如何實現输入字符串This is an Apple on eBay 输出 Siht si na Elppa no yAbe

    <?php $str = "This is an Apple on eBay"; //定义字符串 $len = strlen($str); //字符串长度 $sup = [] ...

  7. SpringBoot-2-基本配置

    自定义启动配置 在resources下面新建一个banner.txt文件,里面写入自己想要的内容 /////////////////////////////////////////////////// ...

  8. spark教程(一)-集群搭建

    spark 简介 建议先阅读我的博客 大数据基础架构 spark 一个通用的计算引擎,专门为大规模数据处理而设计,与 mapreduce 类似,不同的是,mapreduce 把中间结果 写入 hdfs ...

  9. 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教 ...

  10. 牛客 545C 出题人的数组 (贪心)

    出题人有两个数组A,B,请你把两个数组归并起来使得$cost=\sum i c_i$最小. 归并要求原数组的数的顺序在新数组中不改变. 贪心水题 对于一段序列$A_i,A_{i+1},...,A_r$ ...