django前后端数据传输学习记录
在开发过程中会遇到这样的情况
后台返回了一堆的数据,是一个列表
例如
datas = [{"a":1, "b":2}, {"c": 3,"d":4}, {"c": 3,"d":4}, {"c": 3,"d":4}]
前端的html可以通过使用
<div id="test">
{% for data in datas %}
<p>{{ data.a }}</p>
<p>{{ data.b }}</p>
{% endfor %}
</div>
来获取数据,但是如果想要指定的数据,如要获取列表中的第二个字典的数据怎么办呢?查询了下资料
{{ datas.2 }}
貌似可以实现这个效果
如果是这样
<div id="test">
{% for data in datas %}
<p>{{ data.a }}</p>
<p>{{ data.b }}</p>
<button onclick="function()">test</button>
{% endfor %}
</div>
点击按钮弹出弹窗获取更详细的数据呢
其实可以通过使用jquery选择器来选择指定的值
function(){
$(this).parent().childNodes[1].childNodes[0]
$(this).parent().childNodes[2].childNodes[0]
}
这样可以获取到指定的data.a和data.b的值。缺点是写死了,如果页面有改动就要重新修改
django前后端数据传输学习记录的更多相关文章
- Django 前后端数据传输、ajax、分页器
返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...
- 从零开始搭建django前后端分离项目 系列一(技术选型)
前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以 ...
- vue+django前后端项目部署
一.python3的安装 1.安装python前的库环境: yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel ...
- Django前后端分离项目部署
vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...
- luffy项目搭建流程(Django前后端分离项目范本)
第一阶段: 1.版本控制器:Git 2.pip安装源换国内源 3.虚拟环境搭建 4.后台:Django项目创建 5.数据库配置 6.luffy前 ...
- Django前后端分离跨域请求问题
一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...
- [django]前后端分离之JWT用户认证
在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
- 从零开始搭建django前后端分离项目 系列四(实战之实时进度)
本项目实现了任务执行的实时进度查询 实现方式 前端websocket + 后端websocket + 后端redis订阅/发布 实现原理 任务执行后,假设用变量num标记任务执行的进度,然后将num发 ...
随机推荐
- rem布局和hotcss原理分析
rem布局的开源方案hotcss, 其原理个人理解如下: 手机px = (手机页面宽度/设计稿宽度) * 设计稿px 手机rem = 手机px / fontSize = (手机页面宽度/设计稿宽度) ...
- 3.2 Lucene实战:一个简单的小程序
在讲解Lucene索引和检索的原理之前,我们先来实战Lucene:一个简单的小程序! 一.索引小程序 首先,new一个java project,名字叫做LuceneIndex. 然后,在project ...
- DP———6.两个状态之间的 处理
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Python之Excel编程
excel编程:excel中是unicode编码方式 需要使用xrld,xlwt和openpyxl这三个模块,需先通过pip install下载 xlrd 读取模块:xls,xlsx ...
- Create Windows Server 2008 cluster from the command line
How to create a Windows Server 2008 cluster from the command line? Creating a cluster in Server 2008 ...
- 汕头市队赛 SRM 08 A
比赛没参加 所以回来补题咯 A还是自己YY出来了的 可惜比赛没有打 描述 给一个 01 串设为其 S,询问是否存在只出现两次的 01 串 T. 这里的出现定义为存在一串下标 ,满足 且 . 输入格式 ...
- V++ MFC CEdit输出数组 UNICODE TO ASCII码
MFC怎么在静态编辑框中输出数组 //字符转ASCII码void CUTF8Dlg::OnBnClickedButtonCharAscii(){ // TODO: 在此添加控件通知处理程序代码 Upd ...
- Android studio配置使debug签名和release签名一致
在module的build.gradle中添加 android { //重要部分 signingConfigs { release { keyAlias 'jxt' keyPassword '1234 ...
- Netty源码学习(零)前言
本系列文章将介绍Netty的工作机制,以及分析Netty的主要源码. 基于的版本是4.1.15.Final(2017.08.24发布) 水平有限,如有谬误请留言指正 参考资料 the_flash的简书 ...
- LINUX学习资源
鸟哥:http://vbird.dic.ksu.edu.tw/linux_basic/0430cron.php#cron 五分钟教程:http://roclinux.cn/?page_id=3759