Django 从后台往前台传递数据时有多种方法可以实现。

最简单的后台是这样的:

from django.shortcuts import renderdef main_page(request):return render(request, 'index.html')

这个就是返回index.html的内容,但是如果要带一些数据一起传给前台的话,该怎么办呢?

一   view -> HTML 使用Django模版

这里是这样:后台传递一些数据给html,直接渲染在网页上,不会有什么复杂的数据处理(如果前台要处理数据,那么就传数据给JS处理)

Django 代码:

from django.shortcuts import renderdef main_page(request):data = [1,2,3,4]return render(request, 'index.html', {'data': data})

html使用 {{ }} 来获取数据

<div>{{ data }}</div>

可以对可迭代的数据进行迭代:

{% for item in data%}
<p>{{ item }}</p>
{% endfor %}

该方法可以传递各种数据类型,包括list,dict等等。
而且除了 {% for %} 以外还可以进行if判断,大小比较等等。具体的用法读者可以自行搜索。

二 view-> JavaScript

如果数据不传给html用,要传给js用,那么按照上文的方式写会有错误。
需要注意两点:

  1. views.py中返回的函数中的值要用 json.dumps() 处理
  2. 在网页上要加一个 safe 过滤器。

代码:
views.py

# -*- coding: utf-8 -*-import json
from django.shortcuts import renderdef main_page(request):list = ['view', 'Json', 'JS']return render(request, 'index.html', {'List': json.dumps(list),})

JavaScript部分:

var List = {{ List|safe }};

三 JavaScript Ajax 动态刷新页面

这个标题的意思是:网页前台使用Ajax发送请求,后台处理数据后返回数据给前台,前台不刷新网页动态加载数据

Django 代码:

def scene_update_view(request):if request.method == "POST":name = request.POST.get('name')status = 0result = "Error!"return HttpResponse(json.dumps({"status": status,"result": result}))

JS 代码:

        function getSceneId(scece_name, td) {var post_data = {"name": scece_name,};$.ajax({url: {% url 'scene_update_url' %},type: "POST",data: post_data,success: function (data) {data = JSON.parse(data);if (data["status"] == 1) {setSceneTd(data["result"], scece_name, td);} else {alert(data["result"]);}}});} 

JS 发送ajax请求,后台处理请求并返回status, result
在 success: 后面定义回调函数处理返回的数据,需要使用 JSON.parse(data)

文章转自: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html

转载于:https://www.cnblogs.com/zongfa/p/7699279.html

Django 前后台的数据传递相关推荐

  1. django前端引用数据_Django 前后台的数据传递

    Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...

  2. Python Django 前后端数据交互 之 HttpRequest、HttpResponse、render、redirect

    在使用三神装的时候,首先当然是得要导入它们: from django.shortcuts import HttpResponse, render, redirect 一.HttpRequest捕获请求 ...

  3. 用python前端html后端django_浅谈Django前端后端值传递问题

    前端后端传值问题总结 前端传给后端 通过表单传值 1.通过表单get请求传值 在前端当通过get的方式传值时,表单中的标签的name值将会被当做action的地址的参数 此时,在后端可以通过get请求 ...

  4. python django前后台分离项目 请求工具axios(复制 粘贴即可使用)

    python django前后台分离项目中固定写法: 利用axios对接口数据进行请求并渲染 -------------------request.js-------------------- imp ...

  5. Python Qt GUI设计:窗口之间数据传递(拓展篇—5)

    目录 1.单一窗口数据传输 2.多窗口数据传输:调用属性 3.多窗口数据传输:信号与槽 在开发程序时,如果这个程序只有一个窗口,则应该关心这个窗口里面的各个控件之间是如何传递数据的.如果这个程序有多个 ...

  6. javascript表单之间的数据传递

    今天有朋友问我关于用javascript来进行页面各表单之间的数据传递的问题,我以前也写过,不过从来没有注意,今天总结了一下,希望能够给大家一些帮助,也帮助我总结以前学过,用过的知识. 一,最简单的就 ...

  7. iframe 数据传递

    1.使用iframe是父页面与子页面的数据传递 2.使用iframe 跳转部分研究处理ios兼容性 2.1 safai 会阻止iframe里的window.open()函数 采用了讲需要跳转的页面传向 ...

  8. html用vue传递数据,Vue组件及数据传递详解

    本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...

  9. 进程间数据传递:Queue,Pipe 进程间数据共享:Manager

    进程间数据传递:Queue,Pipe 进程间数据共享:Manager 1.使用multiprocessing模块的Queue实现数据传递 ''' 进程间通讯:Queue,用法跟线程里的Queue一样, ...

最新文章

  1. C语言中的CONST使用
  2. 华为9.0以上系统如何没root激活XPOSED框架的流程
  3. 实现困境突破:中小企业家的三项修炼
  4. 临时表 DML 产生redo 问题说明
  5. win10防火墙删除的文件在哪里_Win10系统关闭Windows Defender
  6. 阿里分布式中间件Seata从入门到精通
  7. P7887-「MCOI-06」Existence of Truth【构造】
  8. 桥牌笔记:挤牌的条件之一,调整赢墩到只差一墩
  9. 小米无线网卡linux驱动下载,Linux下安装MT7601U无线网卡驱动
  10. aiml java_AIML实现智能聊天机器人
  11. 大数据平台解决方案(PPT)
  12. 服务器添加hdr文件3dMax,别再乱用HDR了!关于它的10件事你该知道
  13. Linux内核学习(三)应用层和内核
  14. 深度模型压缩技术在智能座舱方案的探索与实践
  15. Error: [$injector:unpr] AngularJS 注入报错
  16. c语言第一章,C语言修正版第一章
  17. TSINGSEE青犀视频RTMP推流摄像头焦距与监控距离存在什么关系?
  18. ubuntu编辑只读文件
  19. Docker简介与安装
  20. YOLOv5-水印检测

热门文章

  1. linux oracle 配置监听器
  2. 日期格式化的“疑难杂症”
  3. ASP.NET前台JS与后台CS函数如何互相调用
  4. Spring2.5.6学习笔记-实例化bean的几种方法
  5. oracle 回闪技术恢复误删数据
  6. hyperledge工具-cryptogen
  7. 详细分析 apache httpd 反向代理的用法
  8. 戴尔:发力互联互通 构建世界基础设施中心
  9. 纯css实现responsive list -- 魔力calc
  10. Python实现排序算法:冒泡排序,插入排序,选择排序,快速排序,希尔排序