如何在Django應用中更改DIV內容

Question

我想通過ajax GET方法用新內容替換DIV內容。 問題在於整個頁面正在加載到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

讓您的視圖僅返回適合您的div的HTML，而不是完整的頁面。

例如，如果僅打算從AJAX調用中使用您的http://127.0.0.1:8000/result/ URL，那么讓該URL的視圖僅呈現沒有HEAD，BODY標簽等的模板。

您可能有一個類似以下的模板：

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

請注意，它不會從base.html或任何其他模板擴展而來，因此在渲染模板時，僅渲染您指定的模板內容。 但是，沒有什么可以阻止用戶點擊您的URL，在這種情況下，返回的結果將不是在瀏覽器中顯示的有效HTML。

還有其他選擇。 您可以在AJAX響應中使用JSON從服務器提供數據，並從JSON數據構建DOM。 或者，您可以允許按原樣提供整個頁面，並使用jQuery將div的內容僅替換為返回頁面的一部分，如下所示：

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

jQuery load（）函數允許您指定要插入到div中的已加載HTML的片段。 在上面的示例中，投放的HTML中的#container-div元素的內容將插入#result-div 。 投放的HTML的其余部分將被丟棄。