2016-12-17 13 views
1

ajax呼び出しからの応答に基づいてテンプレート内のリストを更新したいと思います。私が理解する限り、ビューから直接リストを送り返し、それを反復することはできません。そういうわけで、私は代替案を思いつきましたが、私はちょっとしたことがあります。ここに私の現在のコードは次のとおりです。可変長HTMLリストをajax経由で更新する

  • テンプレート(短縮):

    {% for a in attributes %} 
        <li> a.name </li> 
    {% endfor %} 
    
  • アヤックス:

    $.ajax({ 
        url: "{% url 'main:next_attributes' %}", 
        data: {'next':'abc'}, 
        datatype : 'json', 
        success: function (data) { 
        console.log("Success");}}) 
    

にconsole.logは新しい値を反復処理何かに置き換える必要がありますが上記のリストの値を更新します。ここで難しい部分は、リスト項目の数が以前よりも(より低いかより高い)異なる可能性があるということです。しかし、私は、ビューからの応答がどのように見えるかはっきりしていないため、これにはプレースホルダがあります(次のパートを参照)。要約すると、ここで

def next_attributes(request): 
    keyword = request.GET.get('next', None) 
    next_attributes = Attributes.objects.filter(keyword=keyword)  
    data = {'attributes':next_attributes} 
    return JsonResponse(data) 

問題は、私はJsonResponseを経由して、クエリ結果を返すことができないこと、..です

  • Views.py 私は新しいを取得したいですajaxリクエストで指定されたフィルタに基づいてクエリ結果を返し、テンプレート内のリスト(クエリ結果に基づく可変長)を更新します。私はどんな指針にも感謝します。

+0

あなたは '使用することができますAttributes.objects.filter(キーワード=キーワード).valuesあなた<li>と仮定すると(」名前 ')'が、あなたのテンプレートコードが実行されることを覚えていますブラウザではなくサーバー上にあるので、データを挿入するにはjavascriptを使用する必要があります。 – thebjorn

答えて

1

@thebjornが指しているように、Attributes.objects.filter(keyword=keyword).values('name')を使用して値のリストを取得できます。完全な例は次のようになります:

def next_attributes(request): 
    keyword = request.GET.get('next', None) 
    next_attributes = Attributes.objects.filter(keyword=keyword).values('name') 
    data = {'attributes':next_attributes} 
    return JsonResponse(data) 

私は.valuesはJSON-直列化可能なオブジェクトを返しますが、本質はそれであるかどうか全くわかりません。あなたはjQueryのを使用しているので、あなたが次のことを行うことができ、その後

{'attributes': [{'name': 'name1'}, {'name': 'name2'}]} 

すると、予想オブジェクトは、次のようになります。 「ID myListでsが<ul>に包まれています。

$.ajax({ 
    url: "{% url 'main:next_attributes' %}", 
    data: {'next':'abc'}, 
    datatype : 'json', 
    success: function (data) { 
     $('#myList').empty(); // Clear old values 
     data.attributes.forEach(function(element){ 
      $('#myList').append("<li>"+element.name+"</li>"); // Please note that this does not include any sanitization of the data. Be careful with that 
     } 
    } 
} 
関連する問題