Как изменить html на странице в соответствии с данными полученными ajax-запросом?

Вообщем у меня есть теги select и option, в котором я выбираю категорию и нажимаю на кнопку поиск

<form class="nav-form" action="{% url 'index' %}" method="GET">

        <div class="search-box">
            <input class="search-input" name='name' type="text" placeholder="Поиск на dogovor.ru">
        </div>

        <div class="select-box">
            <div>
                <img class="nav-icon" src="/static/images/region (1).png" alt="">
            </div>

            <label for="select-box1" class="label select-box1">
                <span class="label-desc">По всей России</span>
            </label>

            <select id="select-box1" class="select" name="metro">
                {% include 'category/category_list.html' %}
            </select>
  </div>
 <button type="submit"> Поиск</button>

</form>

Следующий файл это category_list.html

{% for category in category_list %}
<option value="{{child.id}}">{{ category.title }}</option>
{% for child in category.children.all %}

        <option value="{{child.id}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ child.title }}</option>
                <!-- {{ child.posts.count }} -->
            {% endfor %}
{% endfor %}

Далее это файл main.js

        //новый ajax запрос для получения данных с клика кнопки без перезагрузки
        $("#selection-button").click(function (event) {
        event.preventDefault();
        var selectBox = $('#select-box2').find(":selected").val();

        $.ajax({
            url: "{% url 'index' %}",
            method: 'GET',
            data: {
                filter_category: parseInt(selectBox)
            },
            success: function (data) {
                console.log(data)
            },
            error: function (xhr, errmsg, err) {
                console.log("error")
                console.log(error_data)
            }
        });
    });

Это у меня views.py

class PostListView(ListView):
    model = Post
    template_name = 'index.html'
    context_object_name = 'posts'
    form_class = SearchForm

    def get_context_data(self, **kwargs):
        """Здесь получаем из ajax запроса через request ответ id category
        и сохраняем в переменную filter_category
        """
        filter_category = self.request.GET.get("filter_category")
        #в этой переменной posts сохраняем отфлиртованные посты по публикации
        posts = self.model.published.filter()
        try:
            """Если запрос с request приходит истинным 
            то мы фильтруем по категории в этом случаи
            """
            if filter_category:
                posts = self.model.published.filter(category=filter_category)
                print("worked")
        except:
            print("Ошибка")
        paginator = Paginator(posts, 50)
        page_number = self.request.GET.get('page', 1)
        page = paginator.get_page(page_number)
        is_paginated = page.has_other_pages()

        if page.has_previous():
            prev_url = '?page={}'.format(page.previous_page_number())
        else:
            prev_url = ''

        if page.has_next():
            next_url = '?page={}'.format(page.next_page_number())
        else:
            next_url = ''

        """В page _object ключ передаем в контекст в которую буду приходить
        данные либо все, либо отфлиртованные   
        """
        context = super().get_context_data(**kwargs)
        context['categories'] = Category.objects.all()
        context['category_list'] = Category.objects.filter(parent__isnull=True).annotate(num=Count('products'))
        context['metros'] = Metro.objects.all()
        context['page_object'] = page
        print(context['page_object'].object_list)
        context['is_paginated'] = is_paginated
        context['next_url'] = next_url
        context['prev_url'] = prev_url
        return context

В общем, при нажатии на кнопку найти, он успешно фильтрует без перезагрузки только вывод выходит в консоли, так как я там вытаскиваю с jquery и ajax. У меня опыта нет и вопрос заключается в том, что как мне менять html динамично? В консоли выходит весь html отфлиртованый, как эти изменения внедрить?


Ответы (0 шт):