javascript - Django：选中复选框时删除对象

Question

我想在 Django 中检查表行时删除对象。在 Stackoverflow 上遵循答案后，我得到了下面的代码。但是，它不会删除模型的对象。我记录代码；onclick 删除按钮有效。它调用 delete_test 函数，但测试模型没有被删除。终端说

禁止（CSRF 令牌丢失或不正确。）：/test-management/delete_test/

预先感谢！

网址.py

from test_management.views import (test_list, add_test
                                    , delete_test)

urlpatterns = [url(r'^test-management/test/', test_list, name='test'),
    url(r'^test-management/add_test/', add_test, name='add_test'),
    url(r'^test-management/delete_test/', delete_test, name='delete_test'),]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

视图.py

def delete_test(request):
    if request.is_ajax():
        selected_tests = request.POST['test_list_ids']
        selected_tests = json.loads(selected_tests)
        for i, test in enumerate(selected_tests):
            if test != '':
                Test.objects.filter(id__in=request.POST.getlist('items')).delete()
        return HttpResponseRedirect('/test-management/test/')

test_list.html

</button>
    <button class="btn btn-round delete-btn" data-toggle="modal">
  <i class="material-icons" action >delete</i>   Delete
</button>

<div class="table-container">
            <table id="fresh-table" class="table table-striped test-list">
                    <thead class="thead-table-list">
                      <tr>
                        <th scope="col">
                          <div class="form-check">
                              <label class="form-check-label">
                                <input class="form-check-input" id="checkall" type="checkbox" value="">
                                <span class="form-check-sign">
                                  <span class="check"></span>
                                </span>
                              </label>
                          </div>
                        </th>
                        <th scope="col">#</th>
                        <th scope="col">Test</th>
                        <th scope="col">Type</th>
                        <th scope="col">Test Date</th>
                      </tr>
                    </thead>
                    <tbody>
                        {% for test in tests %}
                        <tr data-id="{{ test.id }}">
                            <td>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input check-ele" type="checkbox" value="">
                                        <span class="form-check-sign">
                                        <span class="check"></span>
                                        </span>
                                    </label>
                                  </div>
                            </td>
                            <td>{{ test.id}}</td>
                            <td>{{ test.test_name}}</td>
                            <td>{{ test.test_type}}</td>
                            <td>{{ test.test_date}}</td>  
                        </tr>      
                        {% endfor %}
                    </tbody>
                  </table>
</div>

<script type='text/javascript'>
$(".delete-btn").click(function(){

  var selected_rows=[];

  $('.test-list').find('tr').each(function(){
    var row=$(this);
    console.log(row.find('input[type="checkbox"]').is(':checked'));
    if (row.find('input[type="checkbox"]').is(':checked')) {
        console.log(row.attr('data-id'));
        selected_rows.push(row.attr('data-id'));
        };
    });
    var selected_rows = JSON.stringify(selected_rows);
    $.ajax({
        url: "{% url 'delete_test' %}",
        type: 'POST',
        data: {'test_list_ids': selected_rows},
    })
});
</script>

标签： javascriptjqueryajaxdjango

Answer 1

您需要将 acsrfmiddlewaretoken与 POST 数据一起传递。您可以通过包含模板标签来做到这一点{% csrf_token %}。

</button>
    <button class="btn btn-round delete-btn" data-toggle="modal">
  <i class="material-icons" action >delete</i>   Delete
</button>

<div class="table-container">
            <table id="fresh-table" class="table table-striped test-list">
                    <thead class="thead-table-list">
                      <tr>
                        <th scope="col">
                          <div class="form-check">
                              <label class="form-check-label">
                                <input class="form-check-input" id="checkall" type="checkbox" value="">
                                <span class="form-check-sign">
                                  <span class="check"></span>
                                </span>
                              </label>
                          </div>
                        </th>
                        <th scope="col">#</th>
                        <th scope="col">Test</th>
                        <th scope="col">Type</th>
                        <th scope="col">Test Date</th>
                      </tr>
                    </thead>
                    <tbody>
                        {% for test in tests %}
                        <tr data-id="{{ test.id }}">
                            <td>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input check-ele" type="checkbox" value="">
                                        <span class="form-check-sign">
                                        <span class="check"></span>
                                        </span>
                                    </label>
                                  </div>
                            </td>
                            <td>{{ test.id}}</td>
                            <td>{{ test.test_name}}</td>
                            <td>{{ test.test_type}}</td>
                            <td>{{ test.test_date}}</td>  
                        </tr>      
                        {% endfor %}
                    </tbody>
                  </table>
{% csrf_token %}
</div>

<script type='text/javascript'>
$(".delete-btn").click(function(){

  var selected_rows=[];

  $('.test-list').find('tr').each(function(){
    var row=$(this);
    console.log(row.find('input[type="checkbox"]').is(':checked'));
    if (row.find('input[type="checkbox"]').is(':checked')) {
        console.log(row.attr('data-id'));
        selected_rows.push(row.attr('data-id'));
        };
    });
    var selected_rows = JSON.stringify(selected_rows);
    $.ajax({
        url: "{% url 'delete_test' %}",
        type: 'POST',
        data: {'test_list_ids': selected_rows,'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()},
    })
});
</script>