带有信息的 Django HTML POST 删除按钮

Posted 2023-02-24

【中文标题】带有信息的 Django HTML POST 删除按钮

【英文标题】：Django HTML POST delete button with information

【发布时间】：2018-01-27 17:59:45

【问题描述】：

我有一个包含电子邮件地址的表格，我需要从表格中删除电子邮件地址。该表格将在电子邮件地址旁边有删除按钮。

在初始页面加载时，我的视图将电子邮件地址发送到 Django 模板。当用户单击您要删除的电子邮件地址旁边的删除按钮时，我需要该按钮将相应电子邮件地址的信息一起发布，以便我的视图可以从数据库中删除正确的电子邮件地址。

我查看了提交按钮和 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>

我需要在提交按钮时将licensed_user.user.email连同POST方法一起发送。

【参考方案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>

【参考方案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>