Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索

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 = "文章"

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'),

]

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)

{% 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í)查詢(xún)...共" + 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 %}