Рендеринг HTML из ajax/json в Django
Я пытаюсь фильтровать статьи блога по определенным тегам через ajax. После нескольких дней изучения ajax и работы над этим я пришел к следующему коду.
Я успешно получил данные, отфильтрованные по тегам, и теперь хочу отобразить их в виде html.
Я использовал цикл .each
для перебора значений в app.js
, и пытался вставить html в заголовок id trial
в all-articles.html
.
Я получаю синтаксическую ошибку в консоли. Синтаксическая ошибка возникает в данных json?
Вот скриншот ошибки. Любая помощь будет принята с благодарностью! Спасибо
all-articles.html
{% for article in page_obj %}
<article>
<header id="trial>
<h4>{{ article.title }}</h4>
</header>
</article>
{% endfor %}
app.js
$(document).ready(function () {
$(".tag-nav-links").on("click", function (e) {
e.stopPropagation();
return $.ajax({
type: "POST",
url: "",
data: { filter: `${e.target.textContent}` },
success: function (json) {
var html = "";
$(json).each(function (index, value) {
html += "<h4>{{" + value.title + "}}</h4>";
});
$("#trial").append(html);
},
});
});
});
views.py
@csrf_exempt
def allarticles(request):
articles_list = Articles.objects.all()
paginator = Paginator(articles_list, 12)
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
all_tags = Tags.objects.all()
if request.is_ajax():
tag_assign = request.POST['filter']
tag = Tags.objects.get(tag=tag_assign)
data = serializers.serialize('json', Articles.objects.filter(articletags__tag=tag))
return JsonResponse(data, safe=False)
context = {'page_obj': page_obj, 'all_tags': all_tags}
return render(request, "All-articles.html", context)
Добавьте dataType: "json"
к вашему ajax-запросу, чтобы он автоматически разбирал ответ как json. Если вы не добавите его, ответ будет просто строкой. Как вы делаете это сейчас, вы на самом деле не разбираете ответ.
return $.ajax({
type: "POST",
url: "",
dataType: "json", // this
data: { filter: `${e.target.textContent}` },
success: function (json) {
var html = "";
$(json).each(function (index, value) {
html += "<h4>{{" + value.title + "}}</h4>";
});
$("#trial").append(html);
},
});