Вывод данных через ajax js в шаблон Django

Question

Я пытаюсь установить спиннер загрузки на страницу, на которой выводятся результаты поиска. Нашел пару вариантов и решил воспроизвести у себя на сайте. Запускаю, но в результате не получаю нужного результата: вместо результатов поиска у меня на странице отображается код, который я вставил в javascript, а должны отображаться результаты. Скрипт подгружается после jquery, так что проблема не в нем точно. Писал по образцу из интернета, у автора все завелось нормально.

Пример скрипта:

console.log('testing loader')

const spinnerBox=document.getElementById('spinner-box')
const dataBox=document.getElementById('data-box')

$.ajax({
    type: 'GET',
    url: '/spectrum_search/',
    success: function(response){
        console.log('testing success')
        setTimeout(()=>{
            spinnerBox.classList.add('not-visible')
            console.log("{{ objects }}")
            dataBox.innerHTML += `
            <div class="m-md-3">
                {% for spec in objects %}
                    {% include "spectra/display/spectrum_card_template.html" %}
                {% endfor %}
            </div>`}, 500)
    },
    error: function(error){
        console.log('testing error')
        setTimeout(()=>{
            spinnerBox.classList.add('not-visible')
            console.log('testing error not-visible')
            dataBox.innerHTML = `
            <div class="fancy-title title-border title-center">
                <h1>Результатов не найдено.</h1>
            </div>`}, 500)
    },
})

Часть views.py:

@csrf_exempt
def spectrum_search(request):
        if request.method == 'POST' and 'keyword_search' in request.POST:
        search_queryes = dict()
        res = []
.
.
.
        return render(request, 'spectra/spectrum_search_result.html',
                          context={'objects': objects, 'search_queryes': search_queryes})

В шаблоне spectra/spectrum_search_result.html, в body вставлен блок кода спиннера и блок кода контента:

<div id="spinner-box" class="postcontent mx-auto col-lg-10 col-md-9">
    <div class="text-center">
      <div class="spinner-border text-primary" role="status">
         <span class="visually-hidden">Загрузка...</span>
      </div>
    </div>
</div>
<div class="postcontent mx-auto col-lg-10 col-md-9">
  <p>
   <strong>Поиск по запросу: </strong>
  {% if search_queryes %}
   {% for key, value in search_queryes.items %}
       <span class="badge bg-primary">{{ key }}: {{ value }}</span>
    {% endfor %}
  {% else %}
     Параметры поиска не заданы
  {% endif %}
 </p>
<!-- display spectra as list -->
<div id="data-box" class="col-md-12"></div>
</div><!-- #posts end -->

скрипт подгружается в base.html шаблоне

В результате после выполнения поиска я вижу на странице сначала спиннер, потом он исчезает и вижу такую строку:

{% for spec in objects %}{% include "spectra/display/spectrum_card_template.html" %}{% endfor %}

И даже при выводе в консоль данных, которые я должен обработать, я получаю объект django в скобках {{objects}} в виде текста. Такое впечатление, что не происходит обработка таких объектов через js.

БЛОГ НА HUSL

Вывод данных через ajax js в шаблон Django

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