Как изменить содержимое DIV в приложении django

Question

Я хочу заменить содержимое DIV новым содержимым с помощью ajax GET. Проблема в том, что вся страница загружается в DIV. Но я хочу загрузить только новое содержимое.

function demoButton(){ 

     var forData = $('#For').text(); 
     var ageData = $('#Age').text(); 
     var occasionData = $('#Occasion').text(); 
     var URL ="http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ occasionData +"&relationship="+ forData; 

$.ajax({ 
    type: "GET", 
    url: URL, 
    success: function (response) { 
     $("#testDIV").html(response); 
    } 
}); 
} 

И мой DIV блок:

<div id="testDIV"> 
<ul id="products"> 
{% for deal in deals %} 
    <li data-price="{{ deal.price }}" > 
    <div class="product" > 
      <div class="inner"> 
      <a href="/dailydeals/{{ deal.id }}/"><img src="{{ STATIC_URL }}/images/cimages/{{ deal.image }}" alt="image" style='width:177px;height:175px;' /> </a> 
      <div class="similarProd"><a href="#">View similar product</a></div> 
      <div class="heart"><a href="/usersl/{{user.id}}/{{ deal.id }}"><span>Engraved plaque fsor your<br> 

       girlfriend</span></a></div> 

      <div class="quickView"><a href="#qv_form{{ deal.id }}" id="fb_pop">QUICK VIEW</a></div> 
      <div class="socialMedia"><a href="#"> <img src="/static/images/like.jpg" alt="Like" /></a></div> 
      </div> 
      <div class="description" style='width:177px;height:50px;'> <span class="price">{{ deal.price }}</span> {{ deal.description|safe }} <br /> 
      </div> 
      <a href="/usersl/">Add to SL</a> 
     </div> 
        </li> 
    {% endfor %} 
    </ul> 

     </div> 

Я разрабатываю приложение электронной коммерции, основанный на Django. Я хочу заменить содержимое DIV содержимым, полученным с сервера, в ответ на запрос GET, сделанный на сервере. Но проблема в том, что вся страница загружается в DIV.

Answer 1

Имейте в виду, просто верните HTML, подходящий для вашего div, а не полную страницу.

Например, если ваш http://127.0.0.1:8000/result/ URL предназначен только для использования с вашего вызова AJAX, то есть представление для этого URL просто вынести шаблон без головы, теги и т.д. ТЕЛ

Вы могли бы иметь шаблон что-то вроде этого:

<ul> 
    <li> 
    {{ object.value }} 
    </li> 
<ul> 

Обратите внимание, что это не распространяется от base.html или любой другой шаблон так, когда шаблон оказывается, только содержимое шаблона вы указанные оказаны. Ничего не мешает пользователю ударить ваш URL, но в этом случае возвращенные результаты не будут действительными HTML для отображения в браузере.

Есть альтернативы. Вы можете обслуживать данные с вашего сервера с помощью JSON в ответе AJAX и создавать DOM из данных JSON. Или вы могли бы позволить полной странице, чтобы быть подана, как сейчас, и использовать JQuery, чтобы заменить содержимое DIV только подсекции возвращенной страницы, что-то вроде этого:

$('#result-div').load(URL + ' #container-div'); 

JQuery load() функция позволяет указать фрагмент загруженного HTML для вставки в ваш div. В приведенном выше примере содержимое элемента #container-div в обработанном HTML будет вставлено в #result-div. Остальная часть поданного HTML будет отброшена.