1

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をベースにしたeコマースアプリを開発しています。DIVのコンテンツを、サーバーに対して行われたGET要求からの応答としてサーバーから取得したコンテンツに置き換えたいと思います。しかし、問題はページ全体がDIVにロードされていることです。

4

1 に答える 1

2

ビューに、完全なページではなく、divに適したHTMLを返すようにします。

たとえば、http://127.0.0.1:8000/result/URLがAJAX呼び出しからのみ使用されることを意図している場合は、その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（）関数を使用すると、ロードされたHTMLのフラグメントを指定してdivに挿入できます。上記の例では、提供されるHTMLの要素のコンテンツが#container-divに挿入されます#result-div。提供されたHTMLの残りは破棄されます。

于 2013-03-20T06:27:35.267 に答える