Как изменить 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}}"> {{ 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 отфлиртованый, как эти изменения внедрить?