有時候我們想把一個 list 或者 dict 傳遞給 javascript，處理后顯示到網頁上，比如要用 js 進行可視化的數據。
方法一：視圖函數渲染
直接在視圖函數（views.py中的函數）中渲染一個 list 或 dict 的內容，和網頁其它部分一起顯示到網頁上（一次性地渲染，還是同一次請求）。
# ajax_test/urls.py
url(r'^home/$',views.home,name='ajax_test_home'),
#ajax_text/views.py
#coding:utf-8
from django.shortcuts import render
import json
# Create your views here.
def home(request):
#List = ['My Djano', '渲染Json到模板']
List = ['My Djano', 'Json']
Dict = {'site': 'NGS_TEST', 'author': '蘇亞男'}
return render(request, 'ajax_test/home.html',
{'List': json.dumps(List),'Dict':json.dumps(Dict)})
# ajax_test/templates/ajax_test/home.html
{% extends 'learn/base.html' %}
{% block title %}歡迎光臨ajax_test首頁{% endblock %}
{% block content %}
這里是首頁，歡迎光臨!<br/>
<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>
{% endblock %}
# learn/templates/learn/base.html
<!DOCTYPE html>
<html>
<head>
<title>
{% block title %}NGS{% endblock %}
</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
</head>
注：瀏覽器調試代碼
如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。瀏覽器中使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。
方法二：Ajax再次請求
一，頁面加載完成后，在頁面上操作，在頁面上通過 ajax 方法得到新的數據（再向服務器發送一次請求）并顯示在網頁上，這種情況適用于頁面不刷新的情況下，動態加載一些內容，比如用戶輸入一個值或者點擊某個地方，動態地把相應內容顯示在網頁上。
用 Django實現不刷新網頁的情況下加載一些內容。
由于用 jQuery 實現 ajax 比較簡單，所以我們用 jQuery庫來實現，也可以用原生的 javascript 實現。這里舉例1拓展計算a+b，舉例2傳遞一個數組或字典到網頁，由JS處理再顯示出來。
Demo1：加載字典和列表，JSON格式傳遞數據
# ajax_test/urls.py
url(r'^index/$',views.index,name='ajax_test_index'),
url(r'^ajax_list/$', views.ajax_list, name='ajax-list'),
url(r'^ajax_dict/$', views.ajax_dict, name='ajax-dict'),
# ajax_test/views.py
#coding:utf-8
import os
from django.shortcuts import render
from django.http import HttpResponse
import json
from django.http import JsonResponse
from suynblog import settings
# Create your views here.
def index(request):
return render(request, 'ajax_test/index.html')
def ajax_list(request):
a = range(100)
#return HttpResponse(json.dumps(a),content_type='application/json')
return JsonResponse(a, safe=False)
def ajax_dict(request):
name_dict = {'suyn': 'Love python and Django', 'Miss Su': 'I am learning Django'}
#return HttpResponse(json.dumps(name_dictm),content_type='application/json')
return JsonResponse(name_dict)
# ajax_test/templates/ajax_test/index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
</head>
<body>
<div id="dict">Ajax 加載字典</div>
<p id="dict_result"></p>
<div id="list">Ajax 加載列表</div>
<p id="list_result"></p>
<script>
$(document).ready(function(){
// 列表 list
$('#list').click(function(){
$.getJSON('{% url 'ajax_test:ajax-list' %}',function(ret){
//返回值 ret 在這里是一個列表
for (var i = ret.length - 1; i >= 0; i--) {
// 把 ret 的每一項顯示在網頁上
$('#list_result').append(' ' + ret[i])
};
})
})
// 字典 dict
$('#dict').click(function(){
$.getJSON('{% url 'ajax_test:ajax-dict' %}',function(ret){
//返回值 ret 在這里是一個字典
$('#dict_result').append(ret.suyn + '<br>');
// 也可以用 ret['twz']
})
})
});
</script>
</body>
</html>
Demo2：根據圖片名稱加載圖片，form請求
# ajax_test/urls.py
url(r'^picIndex/$',views.picIndex),
url(r'^get_pic/$', views.get_pic, name='get-pic'),
# ajax_test/views.py
#coding:utf-8
import os
from django.shortcuts import render
from django.http import HttpResponse
import json
from django.http import JsonResponse
from suynblog import settings
# Create your views here.
BASE_DIR = settings.BASE_DIR
print BASE_DIR #/root/suyn_website/suynblog
PICS = os.listdir(os.path.join(BASE_DIR, 'common_static/pics'))
print PICS #['DNA.jpg', 'desktop.jpg']
def picIndex(request):
return render(request, 'ajax_test/pics.html')
def get_pic(request):
color = request.GET.get('color')
number = request.GET.get('number')
name = '{}_{}'.format(color, number)
# 過濾出符合要求的圖片，假設是以輸入的開頭的都返回
result_list = filter(lambda x: x.startswith(name), PICS)
print 'result_list', result_list #result_list ['red_1_2.png', 'red_11.png']
# 去掉pics.html默認的color number的value屬性，可以自己輸入。result_list ['red_2.jpg']
return HttpResponse(json.dumps(result_list),content_type='application/json')
# ajax_test/templates/ajax_test/pics.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
</head>
<body>
<p>請輸入</p>
<form action="{% url 'ajax_test:get-pic' %}" method="get">
color: <input type="text" id="color" name="color" > <br>
number: <input type="text" id="number" name="number" > <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>提交</button>
</form>
<script>
$(document).ready(function(){
$("#sum").click(function(){
var color = $("#color").val();
var number = $("#number").val();
$.get("{% url 'ajax_test:get-pic' %}", {'color':color,'number':number}, function(ret){
$('#result').html('') //清空前面的結果
$.each(ret, function(index, item){
$('#result').append('');
})
})
});
});
</script>
</body>
</html>
