时间:2021-05-22
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 jsonfrom 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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在springboot项目中使用thymeleaf模板,将后台数据传递给前台界面。1、将后台数据传递给前台有很多种方式,可以将后台要传递的数据转换成json格式
出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Datatransferobject数据传输对象),这样在后台往前台传递数据
摘要:基于web的动态网页设计必会涉及到页面间的数据传递,文章探讨了asp设计中常用的web页面间的数据传递方式,分析各种数据传递方式的使用方法、使用场合及优缺
**解决的问题:**使用$attrs和$listeners实现祖孙组件之间的数据传递,也就是多重嵌套组件之间的数据传递。**注意:**本方法针对vue2.4版本
如果读者已经开发过基于Rails的应用,但对其MVC间的数据传递还有诸多困惑,那么恭喜您,本文正是要总结梳理Rails数据传递的方法和技巧。RubyonRail