javascript - 如何更改 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 block 是:

<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

让您的 View 只返回适合您的 div 的 HTML，而不是完整的页面。

例如，如果您的 http://127.0.0.1:8000/result/ URL 仅用于您的 AJAX 调用，那么让该 URL 的 View 只呈现一个模板没有 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 的其余部分将被丢弃。