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


Posted in Python onMay 06, 2021

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

以上就是Django利用AJAX技术实现博文实时搜索的详细内容,更多关于Django用AJAX实时搜索的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
Python BeautifulSoup中文乱码问题的2种解决方法
Apr 22 Python
Python中的魔法方法深入理解
Jul 09 Python
python实现数组插入新元素的方法
May 22 Python
日常整理python执行系统命令的常见方法(全)
Oct 22 Python
Python的math模块中的常用数学函数整理
Feb 04 Python
详解Python数据分析--Pandas知识点
Mar 23 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
Aug 23 Python
使用Python制作新型冠状病毒实时疫情图
Jan 28 Python
解决windows下python3使用multiprocessing.Pool出现的问题
Apr 08 Python
Python如何读写CSV文件
Aug 13 Python
python 高阶函数简单介绍
Feb 19 Python
Python如何利用正则表达式爬取网页信息及图片
Apr 17 Python
python 如何获取页面所有a标签下href的值
May 06 #Python
Python中常见的导入方式总结
May 06 #Python
Python基础之hashlib模块详解
May 06 #Python
用Python爬虫破解滑动验证码的案例解析
python本地文件服务器实例教程
python字符串常规操作大全
python自动化之如何利用allure生成测试报告
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
javascript读取xml
2006/11/04 Javascript
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python+logging+yaml实现日志分割
2019/07/22 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python range实例用法分享
2020/02/06 Python
python 绘制场景热力图的示例
2020/09/23 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
什么是岗位职责
2013/11/12 职场文书
文科生自我鉴定
2014/02/15 职场文书
银行求职信范文
2014/05/26 职场文书
学校开学标语
2014/10/06 职场文书
企业整改报告范文
2014/11/08 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python词云的正确实现方法实例
2021/05/08 Python