情報付きDjango HTML POST削除ボタン

Question

私は電子メールアドレスを持つテーブルを持っており、テーブルから電子メールアドレスを削除する必要があります。テーブルには、電子メールアドレスの横に削除ボタンがあります。

最初のページの読み込み時に、私のビューは電子メールアドレスをDjangoテンプレートに送信します。ユーザーが削除する電子メールアドレスの横にある削除ボタンをクリックすると、対応する電子メールアドレスの情報に沿ってPOSTするボタンが必要になり、ビューでデータベースから正しい電子メールアドレスを削除できるようになります。

私は、送信ボタンとPOST情報について見てきましたが、POSTは通常入力データを送信して動作します。この場合、入力データはありません。ここでは、テンプレートからのコードは次のとおりです。

 <tr> 
      <td>{% trans "Email" %}</td> 
      <td>{% trans " " %}</td> 
     </tr> 
     </thead> 
     <tbody> 
     {% for licensed_user in licensed_users %} 
      <tr> 
       <td>{{ forloop.counter }}</td> 
       <td>{{ licensed_user.user.email }}</td> 
       <td> 
        <form class="flex-container" method="post" action="{% url 'reseller_dashboard' %}" > 
         {% csrf_token %} 
         <div class="input-group"> 
          <button name="delete" type="submit" class="btn btn-default">DELETE 
          </button> 
         </div> 
        </form> 
       </td> 
      </tr> 

私はボタンが提出されたときに、POSTメソッドと一緒にlicensed_user.user.emailを送信する必要があります。

Answer 1

非表示の入力フィールドを設定して、ビューで削除を処理できます。隠し入力は次のようになります。

<form class="flex-container" method="post" action="{% url 'reseller_dashboard' %}" > 
{% csrf_token %} 
    <div class="input-group"> 
    <input type="hidden" name="email" value="{{licensed_user.user.email}}"> 
    <button name="delete" type="submit" class="btn btn-default">DELETE </button> 
    </div> 
</form> 

Answer 2

別の方法として、ajaxメソッドを使用することもできます。

{% for licensed_user in licensed_users %} 
    <tr class="tr__{{ forloop.counter }}"> 
    <td>{{ forloop.counter }}</td> 
    <td>{{ licensed_user.user.email }}</td> 
    <td><button data-email="{{ licensed_user.user.email }}" 
       data-loop="{{ forloop.counter }}" 
       class="btn btn-default delete-action">Delete</button> 
    </td> 
    </tr> 
{% endfor %} 

<script> 
    $('.delete-action').click(function(){ 
    var email = $(this).data('email'); 
    var loop = $(this).data('loop'); 

    $.ajax({ 
     type: "POST", 
     url: "{% url 'reseller_dashboard' %}", 
     data: { 
     'csrfmiddlewaretoken': '{{ csrf_token }}', 
     'email': email, 
     'delete': true 
     }, 
     success: function(message) { 
     console.log(message); 
     $('.tr__' + loop).remove(); // remove this single `<tr>` 
     }, 
     error: function(error) { 
     console.log(error); 
     } 
    }); 
    }); 
</script>