如何改变在Django应用程序DIV内容 [英] How to change DIV contents in django app

问题描述

我想通过AJAX GET方法的新内容替换DIV内容。 现在的问题是整个页面被加载到DIV。但我想只加载新的内容。

I want to replace the DIV contents with the new contents through ajax GET method. The problem is the whole page is loading into the DIV. But i want to load only new contents.

    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的电子商务应用程序。我想替换与内容从服务器中从该服务器取得的GET请求响应得到了DIV的内容。但问题是整个页面是越来越加载到DIV。

I am developing an e-commerce app based on Django. I want to replace the contents of the DIV with the content got from the server in response from the GET request made to the server. But the problem is whole page is getting loaded into the DIV .

推荐答案

让您的看法只返回HTML适合你的分区，而不是一个完整的页面。

Have your view just return HTML suitable for your div, not a complete page.

例如，如果你的 http://127.0.0.1:8000/result/ URL只是为了从你的AJAX调用使用，则有视图该URL只呈现一个模板没有头部，身体标记等。

For example, if your http://127.0.0.1:8000/result/ URL is only intended to be used from your AJAX call, then have the view for that URL just render a template without the HEAD, BODY tags etc.

您可能有一个模板是这样的：

You might have a template something like this:

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

请注意，是不会从 base.html 延长左右的时候模板被渲染任何其他模板，只有您指定的模板的内容呈现。尽管没有理由打你的网址，虽然，在这种情况下，返回的结果将不会在浏览器中显示有效的HTML停止用户。

Note that is doesn't extend from base.html or any other template so when the template is rendered, only the template contents you've specified are rendered. There is nothing stopping a user from hitting your URL though, in which case the results returned will not be valid HTML for display in a browser.

有替代品。你可以成为从你的服务器使用JSON数据的Ajax响应和JSON数据建立的DOM。或者，你可以允许提供完整的网页，因为它现在是，并且使用jQuery与返回的页面只有一个小节，像这样的替换div的内容：

There are alternatives. You could serve out the data from your server using JSON in the AJAX response and build up the DOM from the JSON data. Or, you could allow the full page to be served as it is now, and use jQuery to replace the contents of your div with only a subsection of the returned page, something like this:

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

jQuery的负载（）功能允许您指定加载HTML来插入片段您的DIV。在上面的例子中，提供HTML中的＃容器div的内容元素会被插入到＃结果-DIV 。该所服务的HTML的其余部分将被丢弃。

The jQuery load() function allows you to specify a fragment of the loaded HTML to insert into your div. In the above example, the contents of the #container-div element in the served HTML would be inserted into the #result-div. The remainder of the served HTML will be discarded.

这篇关于如何改变在Django应用程序DIV内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！