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的值。缺点是写死了,如果页面有改动就要重新修改

时间: 2024-10-06 01:35:21

django前后端数据传输学习记录的相关文章

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

内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax ? 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 MTV模型 Django就是基于MTV模型的框架,其中: M:模型层 models.py T:templates V:视图层 views MVC模型 M:模型层 models V:视图层 views C:控制器 controller 本质:django的MTV也是MVC 二.多对多表三种创建方式 第一种:Django ORM自动帮创建 c

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

前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以采用前后端分离方式开发.前端采用webpack+vue+vue-router+axios技术栈,后端用django进行开发.从搭建到上线,整个项目前前后后花了差不多一个月时间,中途也遇到一些问题,不过还好都解决了.由于是个人项目,所以我打算把源码贡献出来大家一起讨论学习. 源代码 https://g

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

一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略也是浏览器针对请求的安全问题所作出的一种保护行为.针对跨域问题,可以有下面的解决方式: JSONP方式 自定义中间件,设置响应头 使用django-cors-headers包 二.解决方式 (一)自定义中间件 JSONP本质上是利用html的一些不受同源策略影响的标签属性src,例如:<a

django 前后端分离,后端接口实现

博客篇我们使用的是前后端不分离的方式进行实现,前后端不分离实现方式,主要用于小型的项目,且一个人就可以搞定所有,但是中大型的应用还是用的前后端分离的方式进行的 前后端分离方式后台主要给前端提供接口,前端JS调用后台的接口,根据接口定义的传参进行传参,得到返回值,然后展现在页面上,或者对数据进行了操作,把操作后的数据传给后端,后端进行数据的更新等 下面的例子我们主要从基本的增删改查进行设计后台接口部分 一.准备工作 1.modles.py文件中,创建student表,用于进行增删改查 class

django前后端交互

创建一个apps 在当前项目文件下,启动dos窗口.执行python manage.py startapp investigate pycharm->tools->Run mange.py Task...出现类似于命令行窗口,执行startapp investigate. 配置apps 在settings.py 的 INSTALL_APP配置中指定,在该列表中添加你刚刚新建的app名称. 静态资源导入 资源 template目录中创建html 创建static目录,并在该目录中创建css.im

SSM框架用JSON进行前后端数据传输

一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输 前端代码 这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内容可以无视,只有美化效果): <form class="form-horizontal" > <label for="firstname" class="col-sm-2 control-label">用户ID</lab

Nginx+uwsgi+celery+supervisor部署Django前后端分离项目

本实验实现了负载均衡.反向代理.动静分离,还实现了根据客户端设备user-agent进行转发,也就是移动端和PC端访问的页面不一样. 1. 项目部署逻辑图 2. 环境准备 服务器:6台VM操作系统:CentOS7LB.www.wap:安装Nginxuwsgi1.uwsgi2:安装nfs-utils.Python3解释器.virtualenvNFS:安装NFSMRCS:安装MySQL.Redis.virtualenv 注意:这里不介绍软件的安装Nginx安装参考:http://blog.51cto

ajax向Django前后端提交请求和CSRF跨站请求伪造

1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login_ajax/$', views.login_ajax, name='login_ajax'), url(r'^index/$', views.index, n

Django 前后端不分离 代码结构详解

Demo:  hello_pycharm 根目录文件:hello_pycharm [__init__.py  __pycache__  settings.py  urls.py  wsgi.py] App:hello [admin.py  apps.py  __init__.py  migrations  models.py  tests.py  urls.py  views.py  __pycache__ ] 模板文件:templates 根路由urls中: from django.conf.