濮阳杆衣贸易有限公司

主頁 > 知識(shí)庫 > Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索

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

熱門標(biāo)簽:外呼不封號(hào)系統(tǒng) 荊州云電銷機(jī)器人供應(yīng)商 幫人做地圖標(biāo)注收費(fèi)算詐騙嗎 悟空智電銷機(jī)器人6 溫州旅游地圖標(biāo)注 電信營業(yè)廳400電話申請(qǐng) 蘇州電銷機(jī)器人十大排行榜 遼寧400電話辦理多少錢 江蘇房產(chǎn)電銷機(jī)器人廠家

學(xué)習(xí)Python Web和Django開發(fā)不能只學(xué)習(xí)Python。我們有時(shí)必需借助其它技術(shù)比如AJAX實(shí)現(xiàn)我們想要的功能。今天我們就要利用Django 2.0 + AJAX開發(fā)一個(gè)功能性頁面: 我們一邊輸入關(guān)鍵詞,網(wǎng)頁一邊會(huì)給你提示所找到的博文數(shù)量。

什么是AJAX技術(shù)?它的應(yīng)用場(chǎng)景有哪些?

Ajax 即“Asynchronous Javascript And XML”(異步 JavaScript 和 XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對(duì)網(wǎng)頁的某部分進(jìn)行更新。

Ajax常見應(yīng)用場(chǎng)景包括:

  • 搜索提示: 在你輸入關(guān)鍵詞還未提交前,搜索框給你提示。
  • 用戶名驗(yàn)證: 當(dāng)你輸入用戶名時(shí),頁面提示你是否已注冊(cè)。
  • 顯示投票結(jié)果:用戶投票后,不用加載頁面即可顯示投票結(jié)果。
  • 評(píng)論加載: 在你提交新的評(píng)論后,不用重新加載整個(gè)網(wǎng)頁就會(huì)顯示新提交的評(píng)論。

以上場(chǎng)景都是Django單靠自己無法實(shí)現(xiàn)的。注意Ajax應(yīng)只用于與服務(wù)器少量數(shù)據(jù)交換,且存安全隱患,不宜廣泛使用。

總體開發(fā)思路

我們創(chuàng)建一個(gè)叫blog的APP,并把它加入到INSTALLED_APP里去,然后在后臺(tái)添加一些文章, 用于搜索(如下所示)。我們需要設(shè)計(jì)2個(gè)功能性頁面: 一個(gè)展示博客文章清單,一個(gè)搜索頁面。

下面我們來看下具體代碼。

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à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

前文提到過我們需要設(shè)計(jì)2個(gè)功能性頁面: 一個(gè)展示博客文章清單,一個(gè)搜索。然而在urls.py里我們卻設(shè)計(jì)了3個(gè)URL。這是因?yàn)槲覀冞€要設(shè)計(jì)一個(gè)URL與AJAX進(jìn)行后臺(tái)數(shù)據(jù)交換。這是用戶看不見的,后面我們會(huì)用到這個(gè)URL。當(dāng)ajax發(fā)送請(qǐng)求到/blog/ajax/search/時(shí),Django就會(huì)調(diào)用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

對(duì)應(yīng)3個(gè)URL,我們需要在視圖里編寫3個(gè)處理方法,其中ajax_search用來給搜索頁面返回Json數(shù)據(jù)(查詢到的文章數(shù)量)。article_search方法用來返回搜索結(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)搜索頁面上ajax的通過GET發(fā)送請(qǐng)求時(shí),服務(wù)器獲取ajax發(fā)送過來的keyword。
  • 如果keyword不為空,服務(wù)器查詢文章標(biāo)題包含有keyword的文章數(shù)量。
  • 服務(wù)器將字典{‘count': count }轉(zhuǎn)化為Json數(shù)據(jù)格式并返回給ajax所在頁面。

模板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的值,并將其通過GET方法發(fā)送至url('/blog/ajax/search')。
  • Django視圖里ajax_search方法處理ajax發(fā)來的請(qǐng)求,并返回json數(shù)據(jù)。
  • 如果服務(wù)器響應(yīng)成功并成功發(fā)來json數(shù)據(jù),將其顯示在id=result的DIV里。

查看效果

下圖是實(shí)時(shí)顯示搜索結(jié)果數(shù)量的效果。隨著關(guān)鍵詞的增長,查詢到的結(jié)果數(shù)量越來越少。

以上就是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)頁動(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的使用及避開CSRF 驗(yàn)證的方式詳解
  • Django中ajax發(fā)送post請(qǐng)求 報(bào)403錯(cuò)誤CSRF驗(yàn)證失敗解決方案
  • Django結(jié)合ajax進(jìn)行頁面實(shí)時(shí)更新的例子
  • Django 通過JS實(shí)現(xiàn)ajax過程詳解

標(biāo)簽:臺(tái)灣 景德鎮(zhèn) 欽州 喀什 黃山 濟(jì)南 宿遷 三沙

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索》,本文關(guān)鍵詞  Django,利用,AJAX,技術(shù),實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索》相關(guān)的同類信息!
  • 本頁收集關(guān)于Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    东至县| 东城区| 张家口市| 茂名市| 阜新市| 石狮市| 定襄县| 利辛县| 博客| 安顺市| 扶沟县| 临汾市| 贵阳市| 抚州市| 剑川县| 法库县| 岳阳县| 封丘县| 荔浦县| 天水市| 青田县| 清原| 昭平县| 镇巴县| 白山市| 调兵山市| 手机| 乐都县| 吴江市| 襄垣县| 黄大仙区| 长治县| 青阳县| 外汇| 海宁市| 南华县| 合山市| 泸州市| 丰台区| 社旗县| 广灵县|