目錄
- 什么是AJAX技術？它的應用場景有哪些?
- 總體開發思路
- 下面我們來看下具體代碼。
- 模板blog/search.html
- 查看效果
學習Python Web和Django開發不能只學習Python。我們有時必需借助其它技術比如AJAX實現我們想要的功能。今天我們就要利用Django 2.0 + AJAX開發一個功能性頁面: 我們一邊輸入關鍵詞，網頁一邊會給你提示所找到的博文數量。
什么是AJAX技術？它的應用場景有哪些?
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
Ajax常見應用場景包括:
- 搜索提示: 在你輸入關鍵詞還未提交前，搜索框給你提示。
- 用戶名驗證: 當你輸入用戶名時，頁面提示你是否已注冊。
- 顯示投票結果：用戶投票后，不用加載頁面即可顯示投票結果。
- 評論加載: 在你提交新的評論后，不用重新加載整個網頁就會顯示新提交的評論。
以上場景都是Django單靠自己無法實現的。注意Ajax應只用于與服務器少量數據交換，且存安全隱患，不宜廣泛使用。
總體開發思路
我們創建一個叫blog的APP，并把它加入到INSTALLED_APP里去，然后在后臺添加一些文章, 用于搜索(如下所示)。我們需要設計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', '發表'),
)
title = models.CharField('標題', max_length=200, unique=True)
slug = models.SlugField('slug', max_length=60)
body = models.TextField('正文')
pub_date = models.DateTimeField('發布時間', default=now, null=True)
create_date = models.DateTimeField('創建時間', auto_now_add=True)
mod_date = models.DateTimeField('修改時間', auto_now=True)
status = models.CharField('文章狀態', 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
前文提到過我們需要設計2個功能性頁面: 一個展示博客文章清單，一個搜索。然而在urls.py里我們卻設計了3個URL。這是因為我們還要設計一個URL與AJAX進行后臺數據交換。這是用戶看不見的，后面我們會用到這個URL。當ajax發送請求到/blog/ajax/search/時，Django就會調用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
對應3個URL，我們需要在視圖里編寫3個處理方法，其中ajax_search用來給搜索頁面返回Json數據(查詢到的文章數量)。article_search方法用來返回搜索結果。我們為什么不用ajax_search返回搜索結果呢？因為查詢到的數據集可能非常大，而ajax方法一般僅應用于與服務器的少量數據交換。
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是如何工作的。
- 當搜索頁面上ajax的通過GET發送請求時，服務器獲取ajax發送過來的keyword。
- 如果keyword不為空，服務器查詢文章標題包含有keyword的文章數量。
- 服務器將字典{‘count': count }轉化為Json數據格式并返回給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如何工作的。
- 當搜索框#id_keyword有屬性變化時，Ajax實時獲取#id_keyword的值，并將其通過GET方法發送至url('/blog/ajax/search')。
- Django視圖里ajax_search方法處理ajax發來的請求，并返回json數據。
- 如果服務器響應成功并成功發來json數據，將其顯示在id=result的DIV里。
查看效果
下圖是實時顯示搜索結果數量的效果。隨著關鍵詞的增長，查詢到的結果數量越來越少。
以上就是Django利用AJAX技術實現博文實時搜索的詳細內容，更多關于Django用AJAX實時搜索的資料請關注腳本之家其它相關文章！
您可能感興趣的文章:- Django如何與Ajax交互
- Django與AJAX實現網頁動態數據顯示的示例代碼
- 使用AJAX和Django獲取數據的方法實例
- Django查詢優化及ajax編碼格式原理解析
- 淺析Django 接收所有文件,前端展示文件（包括視頻，文件，圖片）ajax請求
- django ajax發送post請求的兩種方法
- django框架中ajax的使用及避開CSRF 驗證的方式詳解
- Django中ajax發送post請求 報403錯誤CSRF驗證失敗解決方案
- Django結合ajax進行頁面實時更新的例子
- Django 通過JS實現ajax過程詳解
