在开发过程中会遇到这样的情况

后台返回了一堆的数据,是一个列表

例如

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前后端数据传输学习记录的更多相关文章

  1. Django 前后端数据传输、ajax、分页器

    返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax ​ 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...

  2. 从零开始搭建django前后端分离项目 系列一(技术选型)

    前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以 ...

  3. vue+django前后端项目部署

    一.python3的安装 1.安装python前的库环境: yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel ...

  4. Django前后端分离项目部署

    vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...

  5. luffy项目搭建流程(Django前后端分离项目范本)

    第一阶段: 1.版本控制器:Git      2.pip安装源换国内源    3.虚拟环境搭建        4.后台:Django项目创建 5.数据库配置              6.luffy前 ...

  6. Django前后端分离跨域请求问题

    一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...

  7. [django]前后端分离之JWT用户认证

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  8. 一、Django前后端交互之Ajax和跨域问题

    一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...

  9. 从零开始搭建django前后端分离项目 系列四(实战之实时进度)

    本项目实现了任务执行的实时进度查询 实现方式 前端websocket + 后端websocket + 后端redis订阅/发布 实现原理 任务执行后,假设用变量num标记任务执行的进度,然后将num发 ...

随机推荐

  1. Scala 基础(8)—— 占位符_和部分应用函数

    1. 占位符 _ 针对 Scala 基础(7)—— 函数字面量和一等函数 中最后提到的,关于 filter 函数字面量的精简写法,可以使用占位符 _ 来代替. 占位符_,用来表示一个或者多个参数.(这 ...

  2. 【bzoj1976】[BeiJing2010组队]能量魔方 Cube 网络流最小割

    题目描述 一个n*n*n的立方体,每个位置为0或1.有些位置已经确定,还有一些需要待填入.问最后可以得到的 相邻且填入的数不同的点对 的数目最大. 输入 第一行包含一个数N,表示魔方的大小. 接下来 ...

  3. 【bzoj3675】[Apio2014]序列分割 斜率优化dp

    原文地址:http://www.cnblogs.com/GXZlegend/p/6835179.html 题目描述 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H需要将一个长度为n的非负整数序列 ...

  4. [bzoj3601] 一个人的数论 [莫比乌斯反演+高斯消元]

    题面 传送门 思路 这题妙啊 先把式子摆出来 $f_n(d)=\sum_{i=1}^n[gcd(i,n)==1]i^d$ 这个$gcd$看着碍眼,我们把它反演掉 $f_n(d)=\sum_{i=1}^ ...

  5. android的apk文件结构

    什么是APK?APK文件都由那些组成?不懂没关系,让小编来为你详细解答. 一.APK简介与描述 APK是AndroidPackage的缩写,即Android安装包(apk).APK是类似Symbian ...

  6. highchart柱状图 series中data的数据构造

    先可以看一下data的数据结构 网站http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/mas ...

  7. python类基础

    #coding:gbk class Person(): def __init__(self,age,gender,height,weight): self.age = age self.gender ...

  8. webpack最佳入门实践系列(3)

    6.使用图片 6.1.尝试在css中引入图片 在src目录下新建css文件夹,并且在css文件夹下创建app.css文件,在src目录下新建images文件夹,放入一张图片,在app.css中引入这张 ...

  9. 记录string的妙用

    P1106 删数问题 摘要 --> 题目描述 键盘输入一个高精度的正整数N,去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N和k,寻找一种方案使得剩下的数字组成的 ...

  10. 语音提示辅助类MySoundAlertUtil

    package com.jlb.scan.util; import android.content.Context; import android.media.AudioManager; import ...