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使用 {{ }} 来获取数据

{{ data }}

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

{% for item in data%}

{{ item }}

{% endfor %}

该方法可以传递各种数据类型,包括list,dict等等。

而且除了 {% for %} 以外还可以进行if判断,大小比较等等。具体的用法读者可以自行搜索。

二 view-> JavaScript

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

需要注意两点:

views.py中返回的函数中的值要用 json.dumps() 处理

在网页上要加一个 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前端引用数据_「基于Python技术的智慧中医商业项目」Django前端网站篇-5.资讯的数据交互...

    如果你对中医感兴趣欢迎留言讨论,觉得我的内容对你有帮助的话,能够请我喝一杯沪上阿姨不禁万分感谢. 内容简介 本章介绍Django搭建中医网站项目平台前端建设之资讯模块的数据交互的内容.其中由于代码量较 ...

  2. django前端引用数据_引用django值

    Django静态文件配置 本文目的 最近用django开发项目,发现django的静态文件(js,css和img等)配置比较麻烦,开发环境和生产环境的配置还不一样,这里记录一下,作为备忘.我当前使用的 ...

  3. django存入mysql数据库_django如何存数据到一个mysql数据表里面

    让我们聊聊这个话题, django如何存数据至mysql数据表里面,你会用什么方法?正常情况下,我们form逻辑处理后,直接form.save(),是,这个方法没毛病:但有没有其他的方法呢?假如我们有 ...

  4. vue前端与Django后端查询一定时间段内的数据

    在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据. 这样我们就需要向后端发送时间段的参数,然后在后端处理查询. 这里以Django后端和vue前端的简单例子来记录大致 ...

  5. Django模板、配置文件、静态文件及案例实现(创建模板、设置模板查找路径、模板接收视图传入的数据、模板处理数据、BASE_DIR、DEBUG、本地语言与时区、App应用配置)

    1.Django模板 网站如何向客户端返回一个漂亮的页面呢? 漂亮的页面需要html.css.js. 可以把这一堆字段串全都写到视图中, 作为HttpResponse()的参数,响应给客户端. 存在的 ...

  6. 前端如何处理十万级别的大量数据

    给 「前端开发博客」 加星标,每天打卡学习 长按二维码即可识别"进入网页"查看哟~ 1.前端如何处理十万级别的大量数据 写博客主要是用来总结.巩固知识点,加深自己对这个知识点的理解 ...

  7. vue前端如何向后台发送值_VUE前端从后台请求过来的数据进行转换数据结构操作...

    我就废话不多说了,大家还是直接看代码吧` let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) ...

  8. python django前端重构_Django学习笔记(11)——开发图书管理页面

    基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的图书列表 3. 点击出版社,会列出旗下图书列表 4. 可以创建.修改.删除 图书.作者.出版社 升级需求:10 ...

  9. Django:使用QuerySet删除和查询数据表

    任务:如何去掉关于路由斜杠的警告 运行项目,可以看到警告信息 修改主路由和子路由(斜杠加在主路由路径的尾巴上) 再次运行项目,看看还有没有讨厌的警告信息 (一)删除数据 删除数据有3种方式:删除数据表 ...

最新文章

  1. Mac上webstorm与git仓库建立连接
  2. mc显示服务器生命值,[1.7-1.8]CombatIndicator — 全息显示攻击伤害的数值 让我的世界服务器更有游戏感...
  3. python里元组和列表的共同点和不同点_Python元组与列表的相同点与区别
  4. PHP框架有没有前途?是否适用于复杂的web开发框架
  5. Python基础1(2017-07-16)
  6. Pytorch——分类问题
  7. 谷歌浏览器截长图_小技巧丨电脑截图怎么快捷,想截长图怎么办
  8. wav转换mp3简单图文教程
  9. 一元函数,多元函数,可微的含义 多元函数微分的几何意义 多元函数偏导 那么为什么有微分和可导 能不能固定两个或者多个条件,多偏微分,哈哈
  10. python pyd_python pyd 加密相关
  11. Java Servlet 详解:(三)在 IDES 中开发 Servlet-多图警告
  12. 计算机显示器的视频接口有什么不同,电脑显示器用VGA还是HDMI好有什么区别
  13. 20220610开发出jpgtotxt和jpgtopdf以及pdftojpg工具
  14. 智能车小白必看,该竞赛相关宝贵经验+资源借鉴总结1
  15. vue获取用户本机ip方法
  16. imagettftext php,imagettftext
  17. 递推递归练习 H - 三国佚事——巴蜀之危
  18. RecurDYN V9R1 linux下安装
  19. 2022新PHP赞/易支付系统源码+全新UI界面
  20. bert模型可以做文本主题识别吗_文本匹配方法系列––BERT匹配模型

热门文章

  1. CSS中可以让文字在水平和垂直方向上重叠的两个属性
  2. js定时器倒计时特效
  3. oracle级联更新与级联删除
  4. 开博客第一天!!来几句鸡汤
  5. centos运行C程序
  6. 201506110135陈若倩词法分析实验报告
  7. ios开发网络学习九:NSURLSessionDownloadTask实现大文件下载
  8. Android中Dialog对话框
  9. vue结合element实现自定义上传图片、文件
  10. jar包上传到jcenter