Question

有一个用HTML生成的列表，代表所有对象（卡）。已经有一个删除按钮，但是它使用的是Django功能，并且需要重新加载页面才能生效。有没有简单的方法可以将AJAX包含到程序中？

我是JavaScript和AJAX的初学者。我已经尝试了一些复制粘贴解决方案。我什至试图解构一个简单的Django Ajax CRUD应用程序，但是它具有太多的功能，这似乎对我的应用程序来说太过强大了（我必须重写所有视图，模板和URL）。所以我决定在这里用自己的代码问一个问题。

views.py（列出对象视图）

def all_cards(request):
    cards = Card.objects.all()
    return render(request, 'all_cards.html', {'cards':cards})

all_cards.html

 <body>
    {% if cards %}
    <table class="table" id="card-table">
      <tr>
        <th>Card owner name</th>
        <th>Card balance</th>
      </tr>
      {% for card in cards %}
      <tr>
        <td>{{ card.cardholders_name }}</td>
        <td>{{ card.card_balance }}€</td>
        <td><form action="{% url 'card_delete' card.id %}" method="post">
            {% csrf_token %}
          <input type="submit" value='Delete'>
      </form></td>
      </tr>
      {% endfor %}
      {% else %}
      <p>There are no cards registered.</p>
      {% endif %}
    </table>
  </body>

urls.py

    url(r'(?P<id>\d+)/$', views.card_delete, name='card_delete'),

views.py（删除对象视图）

def card_delete(request, id):
    card_that_is_ready_to_be_deleted = get_object_or_404(Card, id=id)
    if request.method == 'POST':
        card_that_is_ready_to_be_deleted.delete()

    return HttpResponseRedirect('/all_cards')

如您所见，表单的输入（ <input type="submit" value='Delete'> ）通过URL调用Django的视图。

我希望删除按钮能够调用AJAX功能，这将执行类似的操作。

我应该如何编写该功能？

P.S .：这是我的第一个StackOVerflow问题，我愿意接受建设性的批评。

Answer 1

您应该先在表单和表格行中添加 id

<form action="{% url 'card_delete' card.id %}" method="post" id="delete_form_{{ card.id }}">

。

<tr id="card_{{card.id}}">

并将按钮代码更改为：

<input type="button" onclick="submit_delete({{ card.id }})" value="delete">

并使用此功能发送AJAX请求：

<script>
  function submit_delete(id) {
      $.ajax({
          type: $('#delete_form_'+id).attr('method'),
          url: $('#delete_form_'+id).attr('action'),
          data: $('#delete_form_'+id).serialize(),
          success: function (data) {
              $('#card'+id).remove()
          }
      });
  }
</script>

如何使Ajax删除Django的对象实例？

1 个答案: