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

最简单的后台是这样的:

from django.shortcuts import render

def main_page(request):
return render(request, 'index.html')

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

一 view -> HTML 使用Django模版

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

Django 代码:

from django.shortcuts import render

def 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 render def 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 = 0
result = "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)


参考资料:

Django 基础教程

Django 前后台的数据传递的更多相关文章

  1. Django 前后台的数据传递示列

    Django 前后台的数据传递的方法 Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: ? 1 2 3 4 from django.shortcuts import r ...

  2. Django与JS交互的示例代码-django js 获取 python 字典-Django 前后台的数据传递

    Django与JS交互的示例代码 Django 前后台的数据传递 https://www.cnblogs.com/xibuhaohao/p/10192052.html 应用一:有时候我们想把一个 li ...

  3. Python Django 前后端数据交互 之 后端向前端发送数据

    Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...

  4. django 前后台传递数据

    前几天,我们完成了用django orm对数据进行操作.接下来,我们要把数据从后台放到前台. 1.用get方式传值 get:就是在URL拼接字符串,在后台,用request.get方式取 2.用pos ...

  5. C#曲线分析平台的制作(一,ajax+json前后台数据传递)

    在最近的项目学习中,需要建立一个实时数据的曲线分析平台,这其中的关键在于前后台数据传递过程的学习,经过一天的前辈资料整理,大概有了一定的思路,现总结如下: 1.利用jquery下ajax函数实现: & ...

  6. 后端list集合中的数据传递到前台HTML中显示(表格形式)

    关键字:web项目中前后台数据传递问题 在学习web项目的过程中,我们肯定会遇到前后台数据交换问题.这个问题我也思考了很久,今天借此总结一下.由于博主水平有限,如有不当之处,还请大家多多指正,,废话不 ...

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

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

  8. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  9. Activity系列讲解---数据传递

    在Android中,不同的Activity实例可能运行在一个进程中,也可能运行在不同的进程中.因此需要一种特别的机制帮助我们在Activity之间传递消息.Android中通过Intent对象来表示一 ...

随机推荐

  1. 【.net深呼吸】非 Web 项目使用缓存

    从.net 4 开始,非web项目也可以使用缓存技术,故曰:.net 4 乃框架成熟之标志也. 对于缓存嘛,耍过 ASP.NET 的伙伴们肯定知道,这么说吧,就是将一些使用频率较高的数据放于内存中,并 ...

  2. android 通讯录实现

    最近项目需要,于是自己实现了一个带导航栏的通讯录,上代码! 一.数据准备 (1)bean: public class Friend { private String remark; private S ...

  3. 计算机程序的思维逻辑 (51) - 剖析EnumSet

    上节介绍了EnumMap,本节介绍同样针对枚举类型的Set接口的实现类EnumSet.与EnumMap类似,之所以会有一个专门的针对枚举类型的实现类,主要是因为它可以非常高效的实现Set接口. 之前介 ...

  4. 使用java代码关闭指定端口的程序-windows

    转载请请在页首注明作者与出处 一:问题由史 今天遇到一个问题,就是在实现自动化灾备的时候,发现原有死掉的程序没有完全关闭,当然这都不是本文的重点,重点是这个时候,我得把它完全关闭,所以才有了这篇文章. ...

  5. ASP.NET MVC传递参数(model)

    一看到此标题,相信你也会.因为路由是可以从URL地址栏传过去的. 但是Insus.NET不想在地址栏传递,还是一个条件是jQuery的Ajax进行POST的.Insus.NET不清楚别人是怎样处理的, ...

  6. 决策树ID3算法的java实现(基本试用所有的ID3)

    已知:流感训练数据集,预定义两个类别: 求:用ID3算法建立流感的属性描述决策树 流感训练数据集 No. 头痛 肌肉痛 体温 患流感 1 是(1) 是(1) 正常(0) 否(0) 2 是(1) 是(1 ...

  7. 三大框架之hibernate入门

    hibernate入门   1.orm      hibernate是一个经典的开源的orm[数据访问中间件]框架           ORM( Object Relation Mapping)对象关 ...

  8. java分解质因数

      package test; import java.util.Scanner; public class Test19 { /** * 分析:对n进行分解质因数,应先找到一个最小的质数k * 最小 ...

  9. 打造自定Select样式

    打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...

  10. Android Weekly Notes Issue #227

    Android Weekly Issue #227 October 16th, 2016 Android Weekly Issue #227. 本期内容包括: Google的Mobile Vision ...