Django往前端（Ajax）傳列表及字典
有時候我們需要在不刷新的情況下載入一些內容，在網頁的基本知識中我們介紹了 ajax 技術。
在本文中講解如何用 Django 來實現 不刷新網頁的情況下加載一些內容。
由於用 jQuery 實現 ajax 比較簡單，所以我們用 jQuery庫來實現，下面也有例子提供下載。
本節有多個實例提供下載，通過看代碼可以更快的學習。
一個例子，我們要實現的是在不刷新的情況下顯示計算結果到頁面上。
修改 index.html 文件
<!DOCTYPE html>
<html>
<body>
<p>請輸入兩個數字</p>
<form action="/add/" method="get"> a: <input type="text" id="a" name="a"> <br> b: <input type="text" id="b" name="b"> <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>提交</button>
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script> $(document).ready(function(){ $("#sum").click(function(){ var a = $("#a").val(); var b = $("#b").val(); $.get("/add/",{'a':a,'b':b}, function(ret){ $('#result').html(ret) }) }); }); </script>
</body>
</html>
在原來的基礎上，在一些元素上加了 id, 以便於獲取值和綁定數據，然后我們用了jQuery.get() 方法，並用 $(selector).html() 方法將結果顯示在頁面上，如下圖：
備注：關於請求頭和 request.is_ajax() 方法使用
views.py 中可以用 request.is_ajax() 方法判斷是否是 ajax 請求，需要添加一個 HTTP 請求頭：
原生javascript：
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
用 jQuery：
用 $.ajax 方法代替 $.get，因為 $.get 在 IE 中不會發送 ajax header
STANDARD_HEADERS = ['REFER', 'HOST', ...] # just for example
def handle_header(value):
value = value.replace('-', '_').upper()
if value in STANDARD_HEADERS:
return value
return 'HTTP_' + value
更復雜的例子，傳遞一個數組或字典到網頁，由JS處理，再顯示出來。
views.py
from django.http import HttpResponse import json def ajax_list(request): a = range(100) return HttpResponse(json.dumps(a), content_type='application/json') def ajax_dict(request): name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'} return HttpResponse(json.dumps(name_dict), content_type='application/json')
from django.http import JsonResponse def ajax_list(request): a = range(100) return JsonResponse(a, safe=False) def ajax_dict(request): name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'} return JsonResponse(name_dict)
在 django 1.6 及以前的舊版本中可以自己寫一個 JsonResponse 方法，如下：Django 1.7 及以后的版本有更簡單的方法（使用 JsonResponse(官方文檔))：
from django.http import HttpResponse import json class JsonResponse(HttpResponse): def __init__(self, content={}, mimetype=None, status=None, content_type='application/json'): super(JsonResponse, self).__init__( json.dumps(content), mimetype=mimetype, status=status, content_type=content_type)
url(r'^ajax_list/$', 'tools.views.ajax_list', name='ajax-list'), url(r'^ajax_dict/$', 'tools.views.ajax_dict', name='ajax-dict'),
寫好后，我們在 urls.py 中添加以下兩行：
打開開發服務器 python manage.py runserver
我們訪問對應的網址會看到輸出值：
下一步就是在無刷新的情況下把內容加載到網頁了，我們修改一下首頁的模板 index.html
<!DOCTYPE html> <html> <body> <p>請輸入兩個數字</p> <form action="/add/" method="get"> a: <input type="text" id="a" name="a"> <br> b: <input type="text" id="b" name="b"> <br> <p>result: <span id='result'></span></p> <button type="button" id='sum'>提交</button> </form> <div id="dict">Ajax 加載字典</div> <p id="dict_result"></p> <div id="list">Ajax 加載列表</div> <p id="list_result"></p> <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ // 求和 a + b $("#sum").click(function(){ var a = $("#a").val(); var b = $("#b").val(); $.get("/add/",{'a':a,'b':b}, function(ret){ $('#result').html(ret); }) }); // 列表 list $('#list').click(function(){ $.getJSON('/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('/ajax_dict/',function(ret){ //返回值 ret 在這里是一個字典 $('#dict_result').append(ret.twz + '<br>'); // 也可以用 ret['twz'] }) }) }); </script> </body> </html>
標簽：{% url 'name' %}技能提升：getJSON中的寫的對應網址，用 urls.py 中的 name 來獲取是一個更好的方法!
<script> $(document).ready(function(){ // 求和 a + b $("#sum").click(function(){ var a = $("#a").val(); var b = $("#b").val(); $.get("{% url 'add' %}",{'a':a,'b':b}, function(ret){ $('#result').html(ret); }) }); // 列表 list $('#list').click(function(){ $.getJSON("{% url '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-dict' %}",function(ret){ //返回值 ret 在這里是一個字典 $('#dict_result').append(ret.twz + '<br>'); // 也可以用 ret['twz'] }) }) }); </script>
這樣做最大的好處就是在修改 urls.py 中的網址后，不用改模板中對應的網址。
補充：如果是一個復雜的 列表 或 字典，因為比如如下信息：
person_info_dict = [ {"name":"xiaoming", "age":20}, {"name":"tuweizhong", "age":24}, {"name":"xiaoli", "age":33}, ]
用 $.each() 方法代替 for 循環，html 代碼（jQuery)這樣我們遍歷列表的時候，每次遍歷得到一個字典，再用字典的方法去處理，當然有更簡單的遍歷方法：
$.getJSON('ajax-url-to-json', function(ret) { $.each(ret, function(i,item){ // i 為索引，item為遍歷值 }); });
1 $.getJSON('ajax-get-a-dict', function(ret) { 2 $.each(ret, function(key, value){ 3 // key 為字典的 key，value 為對應的值 4 }); 5 });
補充：如果 ret 是一個字典，$.each 的參數有所不同，詳見：http://api.jquery.com/jquery.each/