Django-從0到1寫出一個全面的網(wǎng)頁（14）AJAX

時間：2023-05-24 08:51:01 | 來源：網(wǎng)站運營

時間：2023-05-24 08:51:01 來源：網(wǎng)站運營

Django-從0到1寫出一個全面的網(wǎng)頁（14）AJAX：

前期準(zhǔn)備

1. 請看我的Django基礎(chǔ)文章，用Django寫出最簡單的網(wǎng)頁?？梢詭е蠹覐臒o到有，寫出一個含有"Hello, world!"的基本網(wǎng)頁。最基礎(chǔ)的下載等基本操作都在這篇文章了，本系列文章屬于更“高級”一點，所以不會再花時間在這方面了。

2. 本系列文章 - （1) Django-從0到1寫出一個全面的網(wǎng)頁（1）模板和靜態(tài)圖片

(2) Django-從0到1寫出一個全面的網(wǎng)頁（2）模型和數(shù)據(jù)庫

(3) Django-從0到1寫出一個全面的網(wǎng)頁（3）模型，模板和視圖

(4) Django-從0到1寫出一個全面的網(wǎng)頁（4）網(wǎng)頁表單

(5) Django-從0到1寫出一個全面的網(wǎng)頁（5）用戶身份驗證

(6) Django-從0到1寫出一個全面的網(wǎng)頁（6）模板進(jìn)階

(7) Django-從0到1寫出一個全面的網(wǎng)頁（7）"餅干茶話會"

(8) Django-從0到1寫出一個全面的網(wǎng)頁（8）Redux注冊

(9) Django-從0到1寫出一個全面的網(wǎng)頁（9）優(yōu)化界面

(10) Django-從0到1寫出一個全面的網(wǎng)頁（10）模板標(biāo)簽

(11) Django-從0到1寫出一個全面的網(wǎng)頁（11）外部搜索

(12) Django-從0到1寫一個全面的網(wǎng)頁（12）跟蹤，內(nèi)部搜索

(13) Django-從0到1寫出一個全面的網(wǎng)頁（13）JQuery

3. How to tango with Django 1.7。這是一本英文寫的手把手教你使用Django的好書，舊版本是online免費的，新版本都需要付費。本系列文章就是根據(jù)這本書提供的步驟所寫，因為1.7版本很老舊，我也費了很大的功夫更新了一番。大家要是有時間，也推薦好好翻閱一下這本書。

4. django 官網(wǎng)。大家要是還有更多空閑時間想繼續(xù)深入了解，官網(wǎng)必不可少。

本文目標(biāo)

本文的目標(biāo)是理解什么是Ajax，為什么要用Ajax，以及怎么在Django 中使用Ajax。

---

寫在文前

AJAX本質(zhì)上是一些技術(shù)的組合，這些技術(shù)集成在一起以減少頁面的負(fù)載。Ajax 并不是讓我們重新加載整個頁面，而是只重新加載頁面的一部分或頁面中的一些數(shù)據(jù)。如果你還想了解更多關(guān)于Ajax 的介紹，可以看我的這篇文章，Django，HTML，CSS，JavaScript, jQuery, Ajax, Json - 召喚網(wǎng)頁七葫蘆娃。

注意，為了簡化AJAX 請求，我們將使用JQuery庫。如果你正在使用Twitter CSS引導(dǎo)工具包，那么JQuery 已經(jīng)被添加進(jìn)來了。如果沒有的話，請下載最新版本的JQuery 并將其包含到你的應(yīng)用程序中。

1. 基于Ajax 的功能

為了使用戶與Eva 應(yīng)用程序的交互更加無縫，讓我們添加使用一些AJAX 的特性，例如:

• 添加一個“l(fā)ike”按鈕，讓注冊用戶可以“喜歡”某個特定類別
• 添加內(nèi)聯(lián)類別建議；這樣當(dāng)用戶輸入時，他們可以快速找到想要的類別

在我們的static/js 文件夾中，創(chuàng)建一個新文件，取名rango-ajax.js。

在我們的base 模板中加入

<script src="{% static "js/jquery-2.1.1.js" %}"></script><script src="{% static "js/rango-jquery.js" %}"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>應(yīng)該前面就加過了，不過以防萬一，就再次申明下。

2. 添加一個"like"按鈕

如果我們能讓已注冊的用戶可以表示他們“喜歡”某個特定類別，那就多了一項互動，更能博得讀者歡喜了。在接下來的工作中，我們會讓用戶可以點擊添加“喜歡”類別，但是我們不會跟蹤他們“喜歡”的類別，因為我們相信他們不會多次點擊“喜歡”按鈕。（雖然現(xiàn)實中可能發(fā)生。。。）

2.1 大致流程

為了讓用戶有按鈕點擊添加喜歡的某個特定類別，我們需要如下流程：

在category.html 模板中:

• 添加一個id=" Like "的" Like "按鈕。
• 添加一個模板標(biāo)簽{{% category。喜歡% } } 來顯示喜歡的數(shù)量
• 將其放入一個id="like_count"的div 中，比如說，<divid="like_count">{{category.likes}}</div>，這將設(shè)置模板來捕獲like 并顯示各個類別的like。
• 注意，由于category() 視圖傳遞了對category 對象的引用，因此我們可以使用它和模板中的{{category.likes}} 來訪問like 的數(shù)量

創(chuàng)建一個名為like_category 的視圖，它將檢查請求并選擇相應(yīng)的category_id，然后為該類別增加like的數(shù)量。

• 添加url映射；舉個栗子，將like_category 視圖映射到eva/like_category/。這里的GET 請求將是eva/like_category/?category_id=XXX
• 這個視圖不會返回HTML 頁面，而是會返回該類別的更新后的“喜歡”總數(shù)。

在“rango-ajax.js" 中添加JQuery 代碼來執(zhí)行AJAX GET請求。

• 如果請求成功，則更新#like_count元素，并隱藏like按鈕。

2.2 更新類別模板

為了更新模板，我們需要添加id="Like"按鈕，并創(chuàng)建一個<div> 來顯示Like 的數(shù)量 {{%category.likes%}}。為此，將以下<div> 添加到category.html 模板中:

<p><strong id="like_count">{{ category.likes }}</strong> people like this category{% if user.is_authenticated %} <button id="likes" data-catid="{{category.id}}" class="btn btn-primary" type="button"> <span class="glyphicon glyphicon-thumbs-up"></span> Like </button>{% endif %}</p>顯示效果：

2.3 創(chuàng)建一個喜歡類別視圖

在eva/views.py 中創(chuàng)建一個名為like_category 的視圖。它將用來檢查請求并選擇正確的category_id，然后為該類別增加like的數(shù)量。

# 下面這一行我們先前已經(jīng)加上了，不過以防萬一，還是寫在這了from django.contrib.auth.decorators import login_required@login_requireddef like_category(request): cat_id = None if request.method == 'GET': cat_id = request.GET['category_id'] likes = 0 if cat_id: cat = Category.objects.get(id=int(cat_id)) if cat: likes = cat.likes + 1 cat.likes = likes cat.save() return HttpResponse(likes)在檢查代碼時，我們將看到上面的代碼只允許經(jīng)過身份驗證的用戶表示他們喜歡某個類別。上面這個視圖假設(shè)我們通過GET 傳遞了一個變量category_id，目的是讓我們能夠識別要更新的類別。在這個視圖中，如果我們愿意，我們還可以跟蹤并記錄某個用戶“喜歡”的這個類別——但在這兒，我們?nèi)匀幌Ｍ３趾唵?，只關(guān)注AJAX 機制。

當(dāng)然別忘了在eva/urls.py 中更新我們的URL 映射：

path('like_category/', views.like_category, name='like_category'),現(xiàn)在，當(dāng)我們登錄之后，效果如下圖：

看著很贊，但是還沒有加上我們的Ajax 機制，所以并沒有實際的效果。

2.4 添加Ajax 請求機制

現(xiàn)在在rango-ajax.js 文件中，我們需要添加如下JQuery 代碼來完成Ajax GET 請求：

$('#likes').click(function(){ var catid; catid = $(this).attr("data-catid"); $.get('/eva/like_category/', {category_id: catid}, function(data){ $('#like_count').html(data); $('#likes').hide(); });});上面這段JQuery 代碼將向id 為#like 的元素添加一個事件處理程序，即按鈕。單擊它時，它將從按鈕元素中提取類別id，然后發(fā)出AJAX GET 請求，該請求將調(diào)用/eva/like_category/ 對請求中的category_id 進(jìn)行編碼。如果請求成功，那么id 為like_count 的HTML 元素將會更新請求返回的數(shù)據(jù)，并隱藏id 為like 的HTML 元素。

現(xiàn)在如果登錄后的用戶點擊了大拇指點贊按鈕，按鈕就會消失，并顯示多少人已經(jīng)喜歡這個類別：

3. 添加內(nèi)聯(lián)類別建議 Inline Category Suggestions

如果我們能夠提供一種更快速的方式讓用戶找到一個類別，而不是瀏覽一長串的列表再選擇想要瀏覽的類別，那對用戶而言就更友善了。

要做到這一點，我們可以創(chuàng)建一個建議元素，這樣當(dāng)用戶輸入一個字母或單詞的一部分，系統(tǒng)就會通過提供建議類別的列表進(jìn)行響應(yīng)，然后用戶可以從中選擇。具體點來說，就是當(dāng)用戶輸入時，將向服務(wù)器發(fā)出一系列請求，以獲取與用戶輸入內(nèi)容相關(guān)的建議類別。

3.1 參數(shù)化Get 類別列表函數(shù)

在這個helper 函數(shù)中，我們將使用一個過濾器來查找所有以提供的字符串開頭的類別。我們將使用的過濾器是istartwith，這同樣可以保證我們使用大寫字母或小寫字母都不影響查找。同樣地，在未來，如果考慮字母是否為大寫字母對我們的網(wǎng)頁很重要的話，我們也可以用startswith來代替。

在eva/views.py 文件中添加如下代碼：

def get_category_list(max_results=0, starts_with=''): cat_list = [] if starts_with: cat_list = Category.objects.filter(name__istartswith=starts_with) if cat_list and max_results > 0: if cat_list.count() > max_results: cat_list = cat_list[:max_results] return cat_list3.2 創(chuàng)建建議類別視圖

使用get_category_list 程序，這樣我們就可以創(chuàng)建一個視圖來返回前3位最相關(guān)的搜索答案：

def suggest_category(request): cat_list = [] starts_with = '' if request.method == 'GET': starts_with = request.GET['suggestion'] cat_list = get_category_list(3, starts_with) return render(request, 'rango/cats.html', {'cat_list': cat_list })rango/cats.html 是我們先前就創(chuàng)建好的文件，如果有忘記掉它存在的，可以打開看看。

3.3 URL 映射

將下面代碼加入到eva/urls.py 文件中的urlpatterns 里：

path('suggest_category/', views.suggest_category, name='suggest_category'),3.4 更新基礎(chǔ)模板

在base 模板中的sidebar div 里添加如下HTML 代碼：

<div class="col-sm-3 col-md-2 sidebar"> {% block side_block %} </br> </br> {% get_category_list category %} {% endblock %} <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> <div id="cats"> </div></div>在這里，我們添加了一個輸入框，id="suggestion" 和id="cats" 的div，我們將在其中顯示響應(yīng)。我們不需要添加按鈕，因為我們將在keyup 上添加一個事件處理程序到發(fā)送建議請求的輸入框。

3.5 添加Ajax 到請求建議

添加如下JQuery 代碼到j(luò)s/rango-ajax.js 中：

$('#suggestion').keyup(function(){ var query; query = $(this).val(); $.get('/eva/suggest_category/', {suggestion: query}, function(data){ $('#cats').html(data); });});現(xiàn)在的效果展示如下：

但是就像圖片上面顯示的一樣，每次我在框中輸入目標(biāo)名字，都會顯示“There are no category present.”有知道的原因的小伙伴們歡迎在底下留言分享，謝謝！

后端顯示如下：

[29/Aug/2018 22:02:32] "GET /eva/suggest_category/?suggestion=django HTTP/1.1" 200 77

---

現(xiàn)在你只需要溫習(xí)一下本系列的第一篇，第二篇，第三篇，第四篇，第五篇，第六篇，第七篇，第八篇，第九篇，第十篇，第十一篇，第十二篇，第十三篇和本篇文章；并期待我們的下一篇 Django-從0到1寫出一個全面的網(wǎng)頁（15）自動測試。




如果你覺得我的文章有用，順手點個贊，關(guān)注下我的專欄或則留下你的評論吧！