Динамічне фільтрування статей за допомогою AJAX в Django

4 Березня 2024 в 18:08 117

У розробці веб-додатків часто виникає потреба в реалізації фільтрування контенту без перезавантаження сторінки. Це особливо актуально для сайтів, які мають велику кількість даних, наприклад, новинні або блогові платформи. У таких випадках використання технологій AJAX може значно покращити користувацький досвід, дозволяючи завантажувати та відображати контент динамічно.

Один з типових сценаріїв використання AJAX – це фільтрування даних. У цій статті ми розглянемо, як реалізувати фільтрування статей за допомогою AJAX в фреймворку Django. Для цього ми будемо використовувати JavaScript для взаємодії з сервером без перезавантаження сторінки та Django для обробки запитів і відображення відповідного контенту.

Почнемо з постановки задачі. У нашому Django-проекті ми маємо базовий перегляд, де ми відображаємо всі статті з моделі Article та всі теми з моделі Topic. Нашою метою є забезпечення можливості фільтрування статей за темою. Наприклад, якщо користувач клікає на кнопку “Політика”, то на сторінці відображаються лише статті, які пов’язані з темою “Політика”.

Для досягнення цієї мети ми будемо використовувати AJAX. AJAX (Asynchronous JavaScript and XML) – це технологія, яка дозволяє взаємодіяти з сервером без перезавантаження сторінки. Ми будемо відправляти запити на сервер, отримувати відповідь у форматі JSON і оновлювати вміст сторінки за допомогою JavaScript.

Ось як ми це реалізуємо:

// views.py
def main_view(request):
    all_articles = Article.objects.all()[::-1]
    top_articles = all_articles[:10]
    topics = Topic.objects.all()
    if request.is_ajax():
        topic_name = request.GET.get('topic_name')
        all_articles = Article.objects.filter(topics=topic_name)
        return JsonResponse({'all_articles': all_articles})
    return render(request, "mainapp/main_refactor.html", {"all_articles": all_articles, "top_articles": top_articles, "topics": topics})

// views.py

def main_view(request):

all_articles = Article.objects.all()[::-1]

top_articles = all_articles[:10]

topics = Topic.objects.all()

if request.is_ajax():

topic_name = request.GET.get('topic_name')

all_articles = Article.objects.filter(topics=topic_name)

return JsonResponse({'all_articles': all_articles})

return render(request, "mainapp/main_refactor.html", {"all_articles": all_articles, "top_articles": top_articles, "topics": topics})

У цьому коді ми визначаємо наш перегляд main_view. Якщо запит є AJAX-запитом, ми отримуємо ім’я теми з параметра запиту topic_name і фільтруємо статті за цією темою. Потім ми повертаємо відповідь у форматі JSON.

// main_refactor.html
{% for topic in topics %}
    <button class="topic-button" data-url="{% url 'mainapp:filter_articles' topic.name %}"
            data-topic-name="{{ topic.name }}">{{ topic.name }}</button>
{% endfor %}
<section id="article-list" class="new-articles">
    {% for article in all_articles %}
        {{ article.body }}
    {% endfor %}
</section>

// main_refactor.html

{% for topic in topics %}

<button class="topic-button" data-url="{% url 'mainapp:filter_articles' topic.name %}"

data-topic-name="{{ topic.name }}">{{ topic.name }}</button>

{% endfor %}

{% for article in all_articles %}

{% endfor %}

</section>

У HTML-шаблоні ми відображаємо кнопки для кожної теми і список статей. Кожна кнопка має атрибут data-url, який містить URL для фільтрування статей за відповідною темою.

// script.js
$(document).ready(function () {
    $('.topic-button').click(function () {
        var topicName = $(this).data('topic-name');
        var url = $(this).data('url');
        $.ajax({
            url: '',
            method: 'GET',
            data: {'topic_name': topicName},
            success: function (response) {
                $('#article-list').html(response.all_articles);
            },
        });
    });
});

// script.js

$(document).ready(function () {

$('.topic-button').click(function () {

var topicName = $(this).data('topic-name');

var url = $(this).data('url');

$.ajax({

url: '',

method: 'GET',

data: {'topic_name': topicName},

success: function (response) {

$('#article-list').html(response.all_articles);

});

У JavaScript ми слухаємо подію click для кнопок тем. При кліку ми отримуємо ім’я теми та URL для фільтрування. Потім ми виконуємо AJAX-запит на сервер, передаючи ім’я теми як параметр. Після успішного отримання відповіді ми оновлюємо список статей на сторінці.

Таким чином, ми реалізували динамічне фільтрування статей за допомогою AJAX в Django. Цей підхід дозволяє користувачам зручно вибирати тему та переглядати статті, пов’язані з нею, без перезавантаження сторінки.