2017-11-17 11 views
1

ここに私のコードを簡潔にするために簡略化しています。Django - jQuery ajaxでリストアイテムのid/pkをビューに渡す

HTMLテンプレート

{% for question in questions %} 
    <div class="upvote"></div> 
{% endfor %} 

# lots of code later... 

<script> 
    $(".upvote").click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "{% url 'upvote_for_question' %}", 
      data: { 
       'question': question 
      }, 
      } 
     }) 
    }) 
</script> 

<div class="upvote">要素には、質問のupvoteボタン(スタックオーバーフローのupvoteボタンを思う)です。コードが示すように、questionにはquestion_listにupvoteボタンがあります。

私の質問は、ユーザがupvoteボタンを押したときに、関連するquestionのpk/idをビューにどのように渡すのですか?

答えて

1

一つの方法は、upv​​oteのURLを定義するには、次のようになります。

url(r'^questions/(?P<question_id>\w+)/upvote', views.question_upvote, name='question_upvote') 

次に、テンプレートで逆URL機能を使用し、データ属性にURLを渡します以下のような:

{% for question in questions %} 
    <div class="upvote" 
     id="button-{{ question.pk}}" 
     data-href="{% url 'question_upvote' question.pk %}">{{ question.upvotes }} 
    </div> 
{% endfor %} 

そしてdata-href属性からURLを取得プラスCSRFトークンを追加し、そうでない場合POSTがステータス403で失敗しますし、あなたのjQueryを変更します。何かのように:これらの変更を反映

$(".upvote").click(function(){ 
    var postData = {csrfmiddlewaretoken: '{{ csrf_token }}'} 
    $.ajax({ 
     type: "POST", 
     url: $(this).attr("data-href"), 
     data: postData, 
     success: function(new_number_of_upvotes) { 
      $(this).html(new_number_of_upvotes) 
     } 
    }) 
}) 

更新されたビューは、の意味でのものになるだろう:

def question_upvote(request, question_id): 
    if request.is_ajax() and request.method == 'POST': 
     question = get_object_or_404(Questions, pk=question_id) 
     question.upvotes += 1 
     question.save() 
     return HttpResponse(question.upvotes) 
    else: 
     return HttpResponseRedirect('/') 

私はこれをテストしていませんが、私はそれが動作する必要がありますね。

+0

パーフェクト。私はあなたの指示にしっかりと従って、最初の試しにそれを働かせました。ありがとう! – Valachio

2

あなたはまず、それぞれが固有のidをDIV与えることができる:

{% for question in questions %} 
    <div class="upvote" id="button-{{ question.pk}}"></div> 
{% endfor %} 

そして、POSTデータでそれを渡す:

data: { 
    'question': $(this).attr('id') 
}, 
関連する問題