Django與JS交互的示例代碼
Django 前后台的數據傳遞
https://www.cnblogs.com/xibuhaohao/p/10192052.html
應用一：有時候我們想把一個 list 或者 dict 傳遞給 javascript，處理后顯示到網頁上，比如要用 js 進行可視化的數據。
請注意：如果是不處理，直接顯示在網頁上，用Django模板就可以了。
這里講述兩種方法：
一，頁面加載完成后，在頁面上操作，在頁面上通過 ajax 方法得到新的數據（再向服務器發送一次請求）並顯示在網頁上，這種情況適用於頁面不刷新的情況下，動態加載一些內容。比如用戶輸入一個值或者點擊某個地方，動態地把相應內容顯示在網頁上。
二，直接在視圖函數（views.py中的函數）中渲染一個 list 或 dict 的內容，和網頁其它部分一起顯示到網頁上（一次性地渲染，還是同一次請求）。
需要注意兩點：1、views.py中返回的函數中的值要用 json.dumps()處理 2、在網頁上要加一個 safe 過濾器
view.py
# -*- coding: utf-8 -*- from __future__ import unicode_literals import json from django.shortcuts import render def home(request): List = ['自強學堂', '渲染Json到模板'] Dict = {'site': '自強學堂', 'author': '塗偉忠'} return render(request, 'home.html', { 'List': json.dumps(List), 'Dict': json.dumps(Dict) })
home.html
<!DOCTYPE html> <html> <head> <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>
應用二：不刷新網頁的情況下，加載一些內容
應用三：傳遞數字或者字典到網頁，由JS處理，再顯示出來