Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索
學(xué)習(xí)Python Web和Django開(kāi)發(fā)不能只學(xué)習(xí)Python。我們有時(shí)必需借助其它技術(shù)比如AJAX實(shí)現(xiàn)我們想要的功能。今天我們就要利用Django 2.0 + AJAX開(kāi)發(fā)一個(gè)功能性頁(yè)面: 我們一邊輸入關(guān)鍵詞,網(wǎng)頁(yè)一邊會(huì)給你提示所找到的博文數(shù)量。
什么是AJAX技術(shù)?它的應(yīng)用場(chǎng)景有哪些?
Ajax 即“Asynchronous Javascript And XML”(異步 JavaScript 和 XML),是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
Ajax常見(jiàn)應(yīng)用場(chǎng)景包括:
- 搜索提示: 在你輸入關(guān)鍵詞還未提交前,搜索框給你提示。
- 用戶名驗(yàn)證: 當(dāng)你輸入用戶名時(shí),頁(yè)面提示你是否已注冊(cè)。
- 顯示投票結(jié)果:用戶投票后,不用加載頁(yè)面即可顯示投票結(jié)果。
- 評(píng)論加載: 在你提交新的評(píng)論后,不用重新加載整個(gè)網(wǎng)頁(yè)就會(huì)顯示新提交的評(píng)論。
以上場(chǎng)景都是Django單靠自己無(wú)法實(shí)現(xiàn)的。注意Ajax應(yīng)只用于與服務(wù)器少量數(shù)據(jù)交換,且存安全隱患,不宜廣泛使用。
總體開(kāi)發(fā)思路
我們創(chuàng)建一個(gè)叫blog的APP,并把它加入到INSTALLED_APP里去,然后在后臺(tái)添加一些文章, 用于搜索(如下所示)。我們需要設(shè)計(jì)2個(gè)功能性頁(yè)面: 一個(gè)展示博客文章清單,一個(gè)搜索頁(yè)面。

下面我們來(lái)看下具體代碼。
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ā)布時(shí)間', default=now, null=True)
create_date = models.DateTimeField('創(chuàng)建時(shí)間', auto_now_add=True)
mod_date = models.DateTimeField('修改時(shí)間', auto_now=True)
status = models.CharField('文章?tīng)顟B(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
前文提到過(guò)我們需要設(shè)計(jì)2個(gè)功能性頁(yè)面: 一個(gè)展示博客文章清單,一個(gè)搜索。然而在urls.py里我們卻設(shè)計(jì)了3個(gè)URL。這是因?yàn)槲覀冞€要設(shè)計(jì)一個(gè)URL與AJAX進(jìn)行后臺(tái)數(shù)據(jù)交換。這是用戶看不見(jiàn)的,后面我們會(huì)用到這個(gè)URL。當(dāng)ajax發(fā)送請(qǐng)求到/blog/ajax/search/時(shí),Django就會(huì)調(diào)用ajax_search方法來(lái)處理。
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
對(duì)應(yīng)3個(gè)URL,我們需要在視圖里編寫(xiě)3個(gè)處理方法,其中ajax_search用來(lái)給搜索頁(yè)面返回Json數(shù)據(jù)(查詢到的文章數(shù)量)。article_search方法用來(lái)返回搜索結(jié)果。我們?yōu)槭裁床挥胊jax_search返回搜索結(jié)果呢?因?yàn)椴樵兊降臄?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)搜索頁(yè)面上ajax的通過(guò)GET發(fā)送請(qǐng)求時(shí),服務(wù)器獲取ajax發(fā)送過(guò)來(lái)的keyword。
- 如果keyword不為空,服務(wù)器查詢文章標(biāo)題包含有keyword的文章數(shù)量。
- 服務(wù)器將字典{‘count': count }轉(zhuǎn)化為Json數(shù)據(jù)格式并返回給ajax所在頁(yè)面。
模板blog/search.html
我們的模板blog/search.html代碼如下:
{% block content %}
<h3>Django Ajax實(shí)時(shí)搜索文章</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>正在實(shí)時(shí)查詢...共" + 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有屬性變化時(shí),Ajax實(shí)時(shí)獲取#id_keyword的值,并將其通過(guò)GET方法發(fā)送至url('/blog/ajax/search')。
- Django視圖里ajax_search方法處理ajax發(fā)來(lái)的請(qǐng)求,并返回json數(shù)據(jù)。
- 如果服務(wù)器響應(yīng)成功并成功發(fā)來(lái)json數(shù)據(jù),將其顯示在id=result的DIV里。
查看效果
下圖是實(shí)時(shí)顯示搜索結(jié)果數(shù)量的效果。隨著關(guān)鍵詞的增長(zhǎng),查詢到的結(jié)果數(shù)量越來(lái)越少。

以上就是Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索的詳細(xì)內(nèi)容,更多關(guān)于Django用AJAX實(shí)時(shí)搜索的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Django如何與Ajax交互
- Django與AJAX實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼
- 使用AJAX和Django獲取數(shù)據(jù)的方法實(shí)例
- Django查詢優(yōu)化及ajax編碼格式原理解析
- 淺析Django 接收所有文件,前端展示文件(包括視頻,文件,圖片)ajax請(qǐng)求
- django ajax發(fā)送post請(qǐng)求的兩種方法
- django框架中ajax的使用及避開(kāi)CSRF 驗(yàn)證的方式詳解
- Django中ajax發(fā)送post請(qǐng)求 報(bào)403錯(cuò)誤CSRF驗(yàn)證失敗解決方案
- Django結(jié)合ajax進(jìn)行頁(yè)面實(shí)時(shí)更新的例子
- Django 通過(guò)JS實(shí)現(xiàn)ajax過(guò)程詳解
相關(guān)文章
python編寫(xiě)暴力破解zip文檔程序的實(shí)例講解
下面小編就為大家分享一篇python編寫(xiě)暴力破解zip文檔程序的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
PyTorch簡(jiǎn)單手寫(xiě)數(shù)字識(shí)別的實(shí)現(xiàn)過(guò)程
Pytorch是熱門的深度學(xué)習(xí)框架之一,通過(guò)經(jīng)典的MNIST數(shù)據(jù)集進(jìn)行快速的pytorch入門,這篇文章主要給大家介紹了關(guān)于PyTorch簡(jiǎn)單手寫(xiě)數(shù)字識(shí)別的相關(guān)資料,需要的朋友可以參考下2021-11-11
深度定制Python的Flask框架開(kāi)發(fā)環(huán)境的一些技巧總結(jié)
現(xiàn)在越來(lái)越多的人使用virtualenv虛擬環(huán)境部署Python項(xiàng)目,包括針對(duì)框架的實(shí)例文件夾與版本控制布置,這里我們就來(lái)整理關(guān)于深度定制Python的Flask框架開(kāi)發(fā)環(huán)境的一些技巧總結(jié)2016-07-07
Python按行讀取文件的實(shí)現(xiàn)方法【小文件和大文件讀取】
這篇文章主要介紹了Python按行讀取文件的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了針對(duì)小文件和大文件的讀取方法,需要的朋友可以參考下2016-09-09
python將ip地址轉(zhuǎn)換成整數(shù)的方法
這篇文章主要介紹了python將ip地址轉(zhuǎn)換成整數(shù)的方法,涉及Python針對(duì)IP地址的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-03-03
django使用xlwt導(dǎo)出excel文件實(shí)例代碼
這篇文章主要介紹了django使用xlwt導(dǎo)出excel文件實(shí)例代碼,分享了相關(guān)代碼示例,小編覺(jué)得還是挺不錯(cuò)的,具有一定借鑒價(jià)值,需要的朋友可以參考下2018-02-02
python transpose()處理高維度數(shù)組的軸變換的實(shí)現(xiàn)
本文主要介紹了python transpose()處理高維度數(shù)組的軸變換的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
Python實(shí)現(xiàn)購(gòu)物評(píng)論文本情感分析操作【基于中文文本挖掘庫(kù)snownlp】
這篇文章主要介紹了Python實(shí)現(xiàn)購(gòu)物評(píng)論文本情感分析操作,結(jié)合實(shí)例形式分析了Python使用中文文本挖掘庫(kù)snownlp操作中文文本進(jìn)行感情分析的相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-08-08

