//把数据传到路径为/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. 记一次 Vultr配置

    这里不想排版,因为心情复杂. 第一次搞这个VPS,真的是很气人,由于中英文的关系我一开始就误操作了,让VPS一直挂载着Ubuntu18.10,所以系统一直是在光盘的引导界面,这个问题知道我注册后的四个 ...

  2. 【Linux开发】linux设备驱动归纳总结(六):1.中断的实现

    linux设备驱动归纳总结(六):1.中断的实现 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  3. 论文阅读 | Combating Adversarial Misspellings with Robust Word Recognition

    对抗防御可以从语义消歧这个角度来做,不同的模型,后备模型什么的,我觉得是有道理的,和解决未登录词的方式是类似的,毕竟文本方面的对抗常常是修改为UNK来发生错误的.怎么使用backgroud model ...

  4. EditText inputType类型整理

    //文本类型,多为大写.小写和数字符号.     android:inputType="none"//输入普通字符    android:inputType="text& ...

  5. selenium爬虫后上传数据库。

    一.准备工作 1.1安装软件 安装python.安装谷歌浏览器.将chromedriver.exe放到指定位置.放到Scripts文件夹中.我这边的路径为:C:\Users\1\AppData\Loc ...

  6. 正则爬取某段子网站前20页段子(request库)

    首先还是谷歌浏览器抓包对该网站数据进行分析,结果如下: 该网站地址:http://www.budejie.com/text 该网站数据都是通过html页面进行展示,网站url默认为第一页,http:/ ...

  7. tensorflow 使用tfrecords创建自己数据集

    直接采用矩阵方式建立数据集见:https://www.cnblogs.com/WSX1994/p/10128338.html 制作自己的数据集(使用tfrecords) 为什么采用这个格式? TFRe ...

  8. python爬虫简介

    一.什么是网络爬虫? 网络爬虫,是一种按照一定规则,自动的抓取万维网信息的程序或者脚本. 二.python网络爬虫, 需要用到的第三方包 requests和BeautifulSoup4 pip ins ...

  9. sql server 函数详解(5)系统函数

    返回表中指定字段的长度 返回表中指定字段的名称   返回数据表达式的数据的实际长度函数 返回数据库的编号   返回数据库的名称   返回数据库当前默认的null值 返回服务器端计算机的标识号 返回服务 ...

  10. MVC 部署到服务器

    1.Nuget程序包管理 —>程序包管理控制台,运行以下命令即可:Update-Package Microsoft.AspNet.WebApi -reinstall 2.dll文件的缺少,覆盖