Django利用AJAX技術(shù)實現(xiàn)博文實時搜索
學(xué)習(xí)Python Web和Django開發(fā)不能只學(xué)習(xí)Python。我們有時必需借助其它技術(shù)比如AJAX實現(xiàn)我們想要的功能。今天我們就要利用Django 2.0 + AJAX開發(fā)一個功能性頁面: 我們一邊輸入關(guān)鍵詞,網(wǎng)頁一邊會給你提示所找到的博文數(shù)量。
什么是AJAX技術(shù)?它的應(yīng)用場景有哪些?
Ajax 即“Asynchronous Javascript And XML”(異步 JavaScript 和 XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。
Ajax常見應(yīng)用場景包括:
- 搜索提示: 在你輸入關(guān)鍵詞還未提交前,搜索框給你提示。
- 用戶名驗證: 當(dāng)你輸入用戶名時,頁面提示你是否已注冊。
- 顯示投票結(jié)果:用戶投票后,不用加載頁面即可顯示投票結(jié)果。
- 評論加載: 在你提交新的評論后,不用重新加載整個網(wǎng)頁就會顯示新提交的評論。
以上場景都是Django單靠自己無法實現(xiàn)的。注意Ajax應(yīng)只用于與服務(wù)器少量數(shù)據(jù)交換,且存安全隱患,不宜廣泛使用。
總體開發(fā)思路
我們創(chuàng)建一個叫blog的APP,并把它加入到INSTALLED_APP里去,然后在后臺添加一些文章, 用于搜索(如下所示)。我們需要設(shè)計2個功能性頁面: 一個展示博客文章清單,一個搜索頁面。
下面我們來看下具體代碼。
models.py
本案例中所用到的Article模型代碼如下:
from django.db import models from django.contrib.auth.models import User from django.urls import reverse from django.utils.timezone import now class Article(models.Model): STATUS_CHOICES = ( ('d', '草稿'), ('p', '發(fā)表'), ) title = models.CharField('標(biāo)題', max_length=200, unique=True) slug = models.SlugField('slug', max_length=60) body = models.TextField('正文') pub_date = models.DateTimeField('發(fā)布時間', default=now, null=True) create_date = models.DateTimeField('創(chuàng)建時間', auto_now_add=True) mod_date = models.DateTimeField('修改時間', auto_now=True) status = models.CharField('文章狀態(tài)', max_length=1, choices=STATUS_CHOICES, default='p') views = models.PositiveIntegerField('瀏覽量', default=0) author = models.ForeignKey(User, verbose_name='作者', on_delete=models.CASCADE) def __str__(self): return self.title class Meta: ordering = ['-pub_date'] verbose_name = "文章"
urls.py
前文提到過我們需要設(shè)計2個功能性頁面: 一個展示博客文章清單,一個搜索。然而在urls.py里我們卻設(shè)計了3個URL。這是因為我們還要設(shè)計一個URL與AJAX進(jìn)行后臺數(shù)據(jù)交換。這是用戶看不見的,后面我們會用到這個URL。當(dāng)ajax發(fā)送請求到/blog/ajax/search/時,Django就會調(diào)用ajax_search方法來處理。
from django.urls import path, re_path from . import views # namespace app_name = 'blog' urlpatterns = [ # 搜索文章 re_path(r'^search/$', views.article_search, name='article_search'), # 用于與ajax交互 re_path(r'^ajax/search/$', views.ajax_search, name='ajax_search'), # 展示所有文章 path('', views.ArticleListView.as_view(), name='article_list'), ]
views.py
對應(yīng)3個URL,我們需要在視圖里編寫3個處理方法,其中ajax_search用來給搜索頁面返回Json數(shù)據(jù)(查詢到的文章數(shù)量)。article_search方法用來返回搜索結(jié)果。我們?yōu)槭裁床挥胊jax_search返回搜索結(jié)果呢?因為查詢到的數(shù)據(jù)集可能非常大,而ajax方法一般僅應(yīng)用于與服務(wù)器的少量數(shù)據(jù)交換。
from django.views.generic import ListView from .models import Article from django.shortcuts import render from .forms import SearchForm from django.http import JsonResponse # Create your views here. class ArticleListView(ListView): queryset = Article.objects.filter(status='p').order_by('-pub_date') paginate_by = 6 def article_search(request): if request.method == 'GET': form = SearchForm(request.GET) if form.is_valid(): keyword = form.cleaned_data.get("keyword") if keyword: article_list = Article.objects.filter(title__icontains=keyword) return render(request, 'blog/search.html', {'form': form, 'article_list': article_list}) else: form = SearchForm() return render(request, 'blog/search.html', {'form': form, 'article_list': False, }) def ajax_search(request): if request.method == 'GET': keyword = request.GET.get('keyword', None) if keyword: count = Article.objects.filter(title__icontains=keyword).count() data = {'count': count, } return JsonResponse(data)
我們著重看下ajax_search是如何工作的。
- 當(dāng)搜索頁面上ajax的通過GET發(fā)送請求時,服務(wù)器獲取ajax發(fā)送過來的keyword。
- 如果keyword不為空,服務(wù)器查詢文章標(biāo)題包含有keyword的文章數(shù)量。
- 服務(wù)器將字典{‘count': count }轉(zhuǎn)化為Json數(shù)據(jù)格式并返回給ajax所在頁面。
模板blog/search.html
我們的模板blog/search.html代碼如下:
{% block content %} <h3>Django Ajax實時搜索文章</h3> <form method="get" action="">{% csrf_token %} {{ form }} <input type="submit" value="Search" /> </form> {% endblock %} <div id="result"></div> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script> $("#id_keyword").bind('input propertychange', function() { var keyword = $(this).val(); $.ajax({ url: '/blog/ajax/search/', data: { 'keyword': keyword }, type: 'GET', dataType: 'json', success: function (data) { $("#result").html("<p>正在實時查詢...共" + data.count + "條記錄</p>") }, }); }); </script> {% if article_list %} <p>共找到 {{ article_list | length }} 條記錄。</p> <ul> {% for article in article_list %} <li><a href="{% url 'blog:article_detail' article.id %}" rel="external nofollow" > {{ article.title }}</a> {{ article.pub_date | date:"Y-m-j" }}</li> {% endfor %} </ul> {% endif %}
我們著重看下Ajax如何工作的。
- 當(dāng)搜索框#id_keyword有屬性變化時,Ajax實時獲取#id_keyword的值,并將其通過GET方法發(fā)送至url('/blog/ajax/search')。
- Django視圖里ajax_search方法處理ajax發(fā)來的請求,并返回json數(shù)據(jù)。
- 如果服務(wù)器響應(yīng)成功并成功發(fā)來json數(shù)據(jù),將其顯示在id=result的DIV里。
查看效果
下圖是實時顯示搜索結(jié)果數(shù)量的效果。隨著關(guān)鍵詞的增長,查詢到的結(jié)果數(shù)量越來越少。
以上就是Django利用AJAX技術(shù)實現(xiàn)博文實時搜索的詳細(xì)內(nèi)容,更多關(guān)于Django用AJAX實時搜索的資料請關(guān)注腳本之家其它相關(guān)文章!
- Django如何與Ajax交互
- Django與AJAX實現(xiàn)網(wǎng)頁動態(tài)數(shù)據(jù)顯示的示例代碼
- 使用AJAX和Django獲取數(shù)據(jù)的方法實例
- Django查詢優(yōu)化及ajax編碼格式原理解析
- 淺析Django 接收所有文件,前端展示文件(包括視頻,文件,圖片)ajax請求
- django ajax發(fā)送post請求的兩種方法
- django框架中ajax的使用及避開CSRF 驗證的方式詳解
- Django中ajax發(fā)送post請求 報403錯誤CSRF驗證失敗解決方案
- Django結(jié)合ajax進(jìn)行頁面實時更新的例子
- Django 通過JS實現(xiàn)ajax過程詳解
相關(guān)文章
提高Python生產(chǎn)力的五個Jupyter notebook插件
Jupyter Notebook 因其可用性和實用性而成為數(shù)據(jù)分析和機器學(xué)習(xí)模型領(lǐng)域最流行的 IDE,它也是很多數(shù)據(jù)初學(xué)者的首選 IDE。它最具特色的是,擁有豐富的插件、擴展數(shù)據(jù)處理能力和提升工作效率2021-11-11python輸出第n個默尼森數(shù)的實現(xiàn)示例
這篇文章主要介紹了python輸出第n個默尼森數(shù)的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03解決python matplotlib imshow無法顯示的問題
今天小編就為大家分享一篇解決python matplotlib imshow無法顯示的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05