Улучшение пользовательского интерфейса с помощью Ajax

В файле search.html мы определили метод search.js; давайте создадим этот файл Javascript, чтобы действительно выполнялся запрос AJAX

$('#search-form').submit(function(e){
    $.post('/search/', $(this).serialize(), function(data){
       $('.tweets').html(data);
    });
    e.preventDefault();
});

Этот код JavaScript срабатывает при отправке формы, это формирует AJAX запрос post к /search пользователя с сериализованной формы данных и он получает ответ. Затем, получив ответ, он добавляет данные к элементу класса твитов.

Если мы откроем пользовательский поиск в браузере, он будет выглядеть как на следующем скриншоте:

увеличить изображение

Но подождите! Что случится с этой формой при отправке? В AJAX-запрос отправляется метод post () класса search, который является следующим:

def post(self, request):
        form = SearchForm(request.POST)
        if form.is_valid():
            query = form.cleaned_data['query']
            tweets = Tweet.objects.filter(text__icontains==query)
            context = Context({"query": query, "tweets": tweets})

            return_str = render_to_string('partials/_tweet_search.html', context)
           return HttpResponse(json.dumps(return_str), content_type="application/json")
        else:
            HttpResponseRedirect("/search")

Мы проверяем правильность формы после того, как мы извлекаем из запроса метод request.POST; Если форма является валидной, запрос извлекается из объекта Form.

Затем, метод tweets = Tweet.objects.filter(text__icontains==query) ищет совпадение подстроки для данного термина запроса.

Поиски проводятся с помощью метода под названием filter(text__icontains==query)в модуле Tweet.objects .Вы можете подумать о нем как об эквиваленте оператора SELECT в модели Django. Он получает критерии поиска в качестве своих аргументов и возвращает результат поиска.Имя каждого аргумента должно придерживаться следующего контекста именования:

field__operator

Обратите внимание, что переменные field и operator разделяются двумя нижними подчеркиваниями: поле, которое является именем поля, которое мы хотим искать, и оператор, который является методом поиска, который мы хотим использовать. Вот список часто используемых операторов:

• exact : Это значение аргумента, который является точным соответствием поля
• contains: Поле содержит значение аргумента
• StartsWith: Это поле начинается со значения аргумента
• lt: Это поле меньше, чем значение аргумента
• gt: Это поле больше, чем значение аргумента

Кроме того, существуют версии нечувствительные к регистру первых трех операторов: iexact, icontains и istartswith, которые могут быть также включены в список.

Единственное, что мы делаем совершенно по разному,следующее:

context = Context({"query": query, "tweets": tweets})

            return_str = render_to_string('partials/_tweet_search.html', context)
           return HttpResponse(json.dumps(return_str), content_type="application/json")

Нашей целью было загрузить результаты поиска без перезагрузки или обновления на странице поиска. Если это так, тогда как наши предыдущий метод отображения поможет нам? Он не поможет. Нам нужны некоторые методы, которые могут помочь отправить данные браузеру без его перезагрузки.

Мы широко используем концепции в веб-разработке под названием partials. Это, как правило, небольшие фрагменты HTML-кода, созданные на стороне сервера, отображаемые как JSON, а затем они добавляются к существующей модели DOM с помощью JavaScript.

Чтобы реализовать этот метод, мы сначала создадим каталог под названием partials в существующей папке templates, файл _tweet_search.html со следующим содержимым:

{% for tweet in tweets %}
    <div class="well">
        <span>{{ tweet.text }}</span>
    </div>
{% endfor %}
{% if not tweets %}
    <div class="well">
        <span> Не найдено твитов.</span>
    </div>
{% endif %}

Код будет отображать весь объект tweet в поле well или, если не найден объект tweet, он будет отображать внутри окна well Не найдено твитов.

Вышеприведенная концепция отображает partials как строки в представлении, и если мы должны передать какие-либо параметры для отображения, мы должны передать их в первую очередь с вызовом для создания строки из partials. Чтобы передать параметры partials, нам нужно создать объект контекста и затем передать наши параметры:

context = Context({"query": query, "tweets": tweets})

            return_str = render_to_string('partials/_tweet_search.html', context)

Таким образом, мы будем создавать контекст с запросом (который мы будем использовать позже) и параметры tweets и использовать функцию render_to_string (). Затем мы можем использовать JSON для дампа строки в функцию HttpResponse ():

return HttpResponse(json.dumps(return_str), content_type="application/json")

Список импорта являются следующим:

from django.views.generic import View,TemplateView
from django.shortcuts import render
from user_profile.models import User, UserFollower
from tweet.models import Tweet, HashTag
from tweet.forms import TweetForm, SearchForm, SearchHashTagForm
from django.http import HttpResponseRedirect
from django.template.loader import render_to_string
from django.template import Context
from django.http import HttpResponse
import json

Вот оно что! Мы завершили базовый поиск на основе AJAX для поиска твитов.Поиск по слову django выдаст нам 3 твита, которые мы создали, так, как показано на следующем скриншоте:

увеличить изображение

Идите вперед и поиграйте с поисковой системой, и я уверен, что вы будете еще больше влюбитесь в Django.

Теперь у нас есть страница функционального (хотя и очень простого) поиска. В течение последующих глав будет улучшена функциональность поиска, сам, но сейчас для нас главное ввести AJAX в форму поиска, так чтобы результаты были получены за кулисами и представлены пользователю без перезагрузки страницы. Благодаря нашему модулярному коду, эта задача окажется намного проще, чем это может показаться.