學習來源：Django傳值給前端
非ajax，這裏是將json與網頁一次性全部發給瀏覽器端，不是異步傳輸。
模版html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="list"> 學習 </div>
<div id='dict'></div>
<script type="text/javascript">
//列表
var List = {{ List|safe }};
//下面的代碼把List的每一部分放到頭部和尾部
$('#list').prepend(List[0]);
$('#list').append(List[1]);
console.log('--- 遍歷 List 方法 1 ---')
for(i in List){
console.log(i);// i爲索引
}
console.log('--- 遍歷 List 方法 2 ---')
for (var i = List.length - 1; i >= 0; i--) {
// 鼠標右鍵，審覈元素，選擇 console可以看到輸入的值
console.log(List[i]);
};
console.log('--- 同時遍歷索引和內容，使用 jQuery.each() 方法 ---')
$.each(List, function(index, item){
console.log(index);
console.log(item);
});
// 字典
var Dict = {{ Dict|safe }};
console.log("--- 兩種字典的取值方式 ---")
console.log(Dict['site']);
console.log(Dict.author);
console.log("--- 遍歷字典 ---");
for(i in Dict) {
console.log(i + Dict[i]);//注意，此處 i 爲鍵值
}
</script>
</body>
</html>
urls：
from django.urls import path
from . import views
app_name = 'tttt'
urlpatterns = [
path('', views.home, name='index'),
]
視圖層：
from django.shortcuts import render
import json
# Create your views here.
def home(request):
List = ['自強學堂', '渲染Json到模板']
Dict = {'site': '自強學堂', 'author': '塗偉忠'}
return render(request, 'tttt/home.html', {
'List': json.dumps(List),
'Dict': json.dumps(Dict)
})
f12查看終端即可查看結果。
使用echarts等要js處理的東西時，Django就這樣操作將數據發給前端處理即可。