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.pswp.cn/news/454188.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/454188.shtml
英文地址,請注明出處:http://en.pswp.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…