Django利用AJAX技术实现博文实时搜索

作者:大江狗 时间:2023-01-02 01:57:50 

学习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个功能性页面: 一个展示博客文章清单,一个搜索页面。

Django利用AJAX技术实现博文实时搜索

下面我们来看下具体代码。

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技术实现博文实时搜索

来源:https://mp.weixin.qq.com/s?__biz=MjM5OTMyODA4Nw==&mid=2247483810&idx=1&sn=d554570c8bd12560ec669aa67c0ee21a&chksm=a73c619a904be88c197d6eac09466bc7ab214a57e26b11bb09da9a33fa1cef349277448c8325&scene=21

标签:Django,Ajax,实时搜索
0
投稿

猜你喜欢

  • asp 解析一个xml文件的公用函数集合

    2008-02-29 13:40:00
  • JavaScript基础知识篇-你真的了解JavaScript吗?

    2009-09-17 13:00:00
  • MySQL十条特殊技巧

    2007-09-17 12:33:00
  • Flask项目中实现短信验证码和邮箱验证码功能

    2022-02-24 00:12:58
  • python中的load、loads实现反序列化示列

    2023-04-01 23:49:56
  • js 返回 utf-8 字符编码是多少个字节, 函数 fUtf8BoundCheck

    2010-07-31 18:59:00
  • firefox 2正则表达式

    2008-08-25 19:15:00
  • 使用Perl创建指定编码格式(如utf-8)文件的实现代码

    2023-07-28 08:11:11
  • 浅谈vue异步数据影响页面渲染

    2024-04-30 10:45:19
  • python virtualenv虚拟环境配置与使用教程详解

    2023-01-21 23:06:56
  • Python之reload流程实例代码解析

    2022-04-19 11:42:24
  • Python实现将图像转换为ASCII字符图

    2022-07-15 06:05:20
  • Vuex中actions的使用教程详解

    2024-04-30 08:45:29
  • 详解python OpenCV学习笔记之直方图均衡化

    2022-12-29 20:37:22
  • 彻底弄清楚haslayout概念

    2009-10-27 10:46:00
  • C#部署数据库及IIS站点

    2024-01-17 07:50:08
  • Python Flask框架开发之运用SocketIO实现WebSSH方法详解

    2021-11-06 01:03:33
  • python Django中models进行模糊查询的示例

    2023-08-02 05:54:09
  • MySQL制作具有千万条测试数据的测试库的方法

    2024-01-22 07:00:36
  • python递归函数绘制分形树的方法

    2021-04-22 02:16:02
  • asp之家 网络编程 m.aspxhome.com