tangowithdjango - ch15

AJAX, Django and Jquery

asika KuoFor Django Summer

TwD Chapter 15

Django Summer 2

15. AJAX, Django and JQuery

● AJAX

– Asynchronous JavaScript and XML的縮寫– 是許多現有技術的組合技

● HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, XMLHttpRequest object

– 目的● 減少使用者等待的時間● 每次只更新頁面中一部份的資料

Django Summer 3


● 利用 jQuery來簡化 AJAX元件的設計

– Bootstrap已經包含 jQuery了● 在 static/js下面加入 javascript script

– static/js/jquery-2.1.1.js– static/js/rango-ajax.js

$(document).ready(function() {

// JQuery code to be added in here.

});

Django Summer 4


● 在 templates/rango/base.html加上<script src="{% static "/js/jquery-2.1.1.js" %}"></script><script src="{% static "/js/rango-ajax.js" %}"></script>

Django Summer 5

15.1. Add a “Like Button”

● 增加讓使用者按讚的功能

Django Summer 6

15.1.1. Workflow

● 修改 category.html template

– 加一個 Like按鈕● id=”like”

– 加上一個 template tag來顯示 like數● {{% category.likes %}}

– 建一個叫做 like_count的 div，把顯示 like數的內容丟進去

● <div id="like_count">{{ category.likes }} </div>

Django Summer 7

15.1.1. Workflow

● 修改 category view 以把 like 數傳給 template

● 建立一個新的 like_category view 用來處理 AJAX request

– 功能：檢驗 request 的正確性，然後增加 like 數– 接收 GET request

● rango/like_category/?category_id=XXX

– 回覆在該分類下更新過的 like 數，而不是回覆整個 HTML

● 替 rango-ajax.js 增加功能

– 當按下 like 就發送 GET request 到後端，更新頁面上的 like 數並隱藏按鈕

Django Summer 8

15.1.2. Updating Category Template

● 在 category.html template 新增 like_count div

<p>

<b id="like_count">{{ category.likes }}</b> people like this category

{% if user.is_authenticated %} <button id ="likes" data-catid="{{category.id}}" class="btn btn-mini btn-primary" type="button">Like</button>{% endif %}

</p>

Django Summer 9

15.1.3. Update the Category View

● 修改 category view

– 傳回 Category 物件以及 ID 和 likes 資訊 # Add category to the context so that we can access the id and likes context_dict['category'] = category

Django Summer 10

15.1.4. Create a Like Category View

● 在 views 裡新增 like_category()

@login_requireddef like_category(request): context = RequestContext(request) cat_id = None if request.method == 'GET': cat_id = request.GET['category_id']

likes = 0 if cat_id: category = Category.objects.get(id=int(cat_id)) if category: likes = category.likes + 1 category.likes = likes category.save()

return HttpResponse(likes) <-- 回覆的是 like 數

<-- 透過 GET 取得參數

<-- 要登入才能按讚

Django Summer 11

15.1.4. Create a Like Category View

● 增加新的 URL mapping

url(r'^like_category/$', views.like_category, name='like_category'),

Django Summer 12

15.1.5. Making the AJAX request

● 修改 rango-ajax.js

– 替 like 按鈕加上送出 GET request 的 event handler

$('#likes').click(function(){ var catid; catid = $(this).attr("data-catid"); $.get('/rango/like_category/', {category_id: catid}, function(data){ $('#like_count').html(data); $('#likes').hide(); });});

<-- DOM element 的 event handler

<-- GET request 成功時的 callback function<-- 透過jquery.get() 來發出GET request

<-- 取得按鈕的 catid

Django Summer 13

15.2. Adding Inline Category Suggestions

● 提供一個輸入框，讓使用者一邊輸入分類名稱時，頁面就即時更新符合輸入名稱的分類列表– 當使用者在輸入時就會送出一連串的 request給 server找出符合的類別

Django Summer 14

15.2.1. Workflow

● 建立 get_category_list(max_results=0, starts_with='')以回傳符合要求的分類清單以及數量

● 建立 suggest_category view處理GET request

– 找出符合輸入字串的前八名分類– 把找出的Category物件透過 template render成HTML回傳

● 重複利用 category_list.html template● 建立URL mapping

Django Summer 15

15.2.1. Workflow

● 在 base.html的 sidebar部分加上一個輸入框和用來顯示類別結果的 div

– 隨著文字的輸入， div會一直更新內容● 註冊 event handler在輸入文字時送出 GET request

Django Summer 16

15.2.2. Parameterise the Get Category List Function

● 新增 get_category_list helper function

def get_category_list(max_results=0, starts_with=''): cat_list = [] if starts_with: cat_list = Category.objects.filter(name__istartswith=starts_with) else: cat_list = Category.objects.all()

if max_results > 0: if len(cat_list) > max_results: cat_list = cat_list[:max_results]

for cat in cat_list: cat.url = encode_url(cat.name)

return cat_list

Django Summer 17

15.2.3. Create a Suggest Category View

● 新增 suggest_category view

– 預設接受 GET request

– 透過 get_category_list()找出符合條件的分類，然後從category_list.html template render出 HTMLdef suggest_category(request): context = RequestContext(request) cat_list = [] starts_with = '' if request.method == 'GET': starts_with = request.GET['suggestion']

cat_list = get_category_list(8, starts_with)

return render_to_response('rango/category_list.html', {'cat_list': cat_list }, context)

Django Summer 18

15.2.4. Map View to URL

● 修改 urls.pyurl(r'^suggest_category/$', views.suggest_category, name='suggest_category'),

Django Summer 19

15.2.5. Update Base Template

● 增加查詢的輸入框和顯示結果的 div

<ul class="nav nav-list"> <li class="nav-header">Find a Category</li> <form> <label></label> <li><input class="search-query span10" type="text" name="suggestion" value="" id="suggestion" /></li> </form> </ul>{% if cat_list %} <div id="cats"> {% include 'rango/category_list.html' with cat_list=cat_list %} </div>{% endif %}

Django Summer 20

15.2.6. Add AJAX to Request Suggestions

● 替輸入框註冊 keyup的 event handler$('#suggestion').keyup(function(){ var query; query = $(this).val(); $.get('/rango/suggest_category/', {suggestion: query}, function(data){ $('#cats').html(data); });});

Django Summer 21

15.2.6. Add AJAX to Request Suggestions

● 然後一邊輸入就會看到 server端收到一連串的 request

[14/Jul/2014 07:02:53] "GET /rango/suggest_category/?suggestion=h HTTP/1.1" 200 84[14/Jul/2014 07:02:53] "GET /rango/suggest_category/?suggestion=he HTTP/1.1" 200 84[14/Jul/2014 07:02:54] "GET /rango/suggest_category/?suggestion=hel HTTP/1.1" 200 84[14/Jul/2014 07:02:54] "GET /rango/suggest_category/?suggestion=hell HTTP/1.1" 200 84[14/Jul/2014 07:02:55] "GET /rango/suggest_category/?suggestion=hello HTTP/1.1" 200 84[14/Jul/2014 07:02:56] "GET /rango/suggest_category/?suggestion=hello+ HTTP/1.1" 200 84[14/Jul/2014 07:02:56] "GET /rango/suggest_category/?suggestion=hello+w HTTP/1.1" 200 84[14/Jul/2014 07:02:56] "GET /rango/suggest_category/?suggestion=hello+wo HTTP/1.1" 200 84[14/Jul/2014 07:02:57] "GET /rango/suggest_category/?suggestion=hello+wor HTTP/1.1" 200 84[14/Jul/2014 07:02:57] "GET /rango/suggest_category/?suggestion=hello+worl HTTP/1.1" 200 84[14/Jul/2014 07:02:57] "GET /rango/suggest_category/?suggestion=hello+world HTTP/1.1" 200 84

tangowithdjango - ch15

Engineering