python后端数据发送到前端_Python Django 前后端数据交互 之 后端向前端发送数据...

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

最简单的后台是这样的:

from django.shortcuts import render

defmain_page(request):

return render(request, ‘index.html‘)

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

一 view -> HTML 使用Django模版

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

Django 代码:

from django.shortcuts import render

defmain_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

defmain_page(request):

list = [‘view‘, ‘Json‘, ‘JS‘]

return render(request, ‘index.html‘, {

‘List‘: json.dumps(list),

})

JavaScript部分:

var List = {{ List|safe }};

三 JavaScript Ajax 动态刷新页面

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

Django 代码:

defscene_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 代码:

functiongetSceneId(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.mzph.cn/news/454188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dapper的基本使用

Dapper是.NET下一个micro的ORM,它和Entity Framework或Nhibnate不同,属于轻量级的,并且是半自动的。也就是说实体类都要自己写。它没有复杂的配置文件,一个单文件就可以了。给出官方地址。 http://code.google.com/p/dapper-dot-n…

函数名作为参数传递

假如不知道signal的函数原型,考虑child_handler函数的参数从哪里来? void child_handler(int sig) { if (sig SIGINT) kill(pid_parent, SIGUSR1); } int main(void) { ...... signal(SIGINT, child_handler); ...... } 1、…

易语言神经网络验证码识别_递归神经网络 GRU+CTC+CNN 教会验证码识别

利用 NLP 技术做简单数据可视化分析Chat 简介:用递归神经网络采用端到端识别图片文字,递归神经网络大家最早用 RNN ,缺陷造成梯度消失问题;然后采用了 LSTM,解决 RNN 问题,并且大大提高准确率;现…

GCC 生成的符号表调试信息剖析

GCC把C语言源文件('.c')编译成汇编语言文件('.s'),汇编器把汇编语言文件翻译成目标文件('.o'),最后由链接器链…

《操作系统》OS学习(一):OS相关

清华大学操作系统OS(向勇、陈渝)视频地址:http://www.xuetangx.com/courses/course-v1:TsinghuaX30240243Xsp/about 在ucore实验中,一些基本的常用工具如下: 命令行shell: bash shell -- 有对文件和目录操作的各种命令…

Android4.0蓝牙使能的详细解析

毫无疑问,bluetooth的打开是在Settings中进行的操作。因此,冤有头,债有主,我们来到了Settings.java中,果然发现了相关的代码如下: mBluetoothEnabler new BluetoothEnabler(context, new Switch(context));…

第一次冲刺

本人小组分工角色:产品负责人 本组冲刺订单介绍:经过小组的成员讨论,我们大概确立了一个冲刺的订单是完成一个简易的长沙学院网站项目。 最后完成情况概述:经过大约两周的努力,我们组的编程人员运用python构建了一个简…

移动端导出excel_连载系列【4】Excel开发移动端quot;APPquot;

前三篇文章介绍了百度地图生成器、源代码编辑器、GPS经纬度批量转换工具、源代码编辑器中添加自定义功能按钮和地图控件。这些写好的Java Script代码虽然可以实现所有期望的结果,但毕竟不是一个HTML文件,不便于传播和使用,更无法变成一个类似…

《操作系统》OS学习(二):启动、中断、异常

Bootloader:加载OS。操作系统一开始是放在DISK(硬盘)中,并不是放在内存中。 BIOS:基本I/O处理系统。存放在ROMRead-Only Memory)只读存储中 BIOS(Basic Input/Output System)基本输入输出系统。…

[GCC for C]编译选项---IDE掩盖下的天空

编译选项 ---------IDE掩盖下的天空 /*************************************** * gcc for c language ***************************************/ Single Source to Executable $ gcc helloworld.c [-o howdy] 默认生成的名字a.exe ______________________________________ …

2016级算法第二次上机-F.ModricWang's Number Theory II

891 ModricWangs Number Theory II 思路 使得序列的最大公约数不为1,就是大于等于2,就是找到一个大于等于2的数,它能够整除序列中的所有数。 考虑使得一个数d整除数组中所有数的代价: 如果一个数不能被b整除,那么可以花…

常用css属性集(持续更新…)

禁止换行,超出部分显示…:a. 代码:.hide_word{ max-width: 100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } b. 效果: 本文转自 bilinyee博客,原文链接: http://blog.51cto.co…

parallels网络初始化失败_33 个神经网络「炼丹」技巧

自然语言处理Andrej Karpathy 是深度学习计算机视觉领域、与领域的研究员。博士期间师从李飞飞。在读博期间,两次在谷歌实习,研究在 Youtube 视频上的大规模特征学习,2015 年在 DeepMind 实习,研究深度强化学习。毕业后&#xff0…

《操作系统》OS学习(三):系统调用

例子 首先看一个标准C库的例子:当我们程序中使用了C库中的printf()函数,实际在底层是在内核态中调用了write()函数。图中右侧则是将程序代码与C库都算到应用程序中,内核提供了一个系统调用接口。 从这个例子我们可以得到以下几点&#xff1a…

cygwin/gcc与MinGW

cygwin/gcc和MinGW都是gcc在windows下的编译环境,但是它们有什么区别?在实际工作中如何选择这两种编译器呢?cygwin/gcc完全可以和在linux下的gcc划等号,这个从boost库的划分中就可以看出来端倪,cygwin下的gcc和linux下的gcc使用的是相同的T…

JavaScript服务器端开发技术(对象属性的枚举与查询)

既然对象是属性的集合,那么检测与枚举集合中的属性就是一项重要任务。对此,我们来分别看一下ES3和ES5提供的解决方案。 1) ES3枚举方案 示例代码: var contacts{ ID:[0,1,2,3,4,5], names:["Zero","One","Two&q…

treelistview 所有节点失去焦点_垃圾询盘过滤,焦点科技的 Milvus 实践

文章作者:黎阳,焦点科技软件开发工程师李成龙,Zilliz 数据工程师Milvus (https://milvus.io/) 向量搜索引擎开源半年以来,全球已经有数百家企业或组织用户。焦点科技是一家以 B2B 外贸交易为主营业务的科技公司,也是 M…

《操作系统》OS学习(四):计算机体系结构、内存层次和地址生成

计算机除了计算能力之外还有存储能力,存储能力即计算机拥有一系列的存储介质,我们可以在存储介质上存储我们的代码和数据。计算机体系结构中约定了哪些地方可以用来存储数据:CPU内的寄存器、内存和外存。不同的存储介质,容量、速度…

GCC中SIMD指令的应用方法

X86架构上的多媒体应用开发,如果能够使用SIMD指令进行优化, 性能将大大提高。目前,IA-32的SIMD指令包括MMX,SSE,SSE2等几级。 在GCC的开发环境中,有几种使用SIMD指令的方式,本文逐一介绍。X86的…

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from angular/core; import { Http, Headers } from angular/http; import { Observable } from rxjs/Observable; import { ErrorHandler } from angular/core; import rxj…