Django Rest 프레임 워크 데이터 테이블 DELETE

Question

발행물

Django Rest Framework API URL (rest_framework 라우터 기본값)에 ID 목록을 보내고 싶습니다. 지금까지 모든 것이 ID를 보내는 시점까지 작동하고 있습니다. 삭제 버튼을 클릭하면 DELETE 호출이로 이동 127.0.0.1:8000/api/entries/_id_/하고 삭제를 위해 선택한 적절한 ID를 추가하지 않습니다.

서버의 오류 메시지

나는 이것이 다소 분명하다고 확신합니다.

{detail: "Not found."}
detail: "Not found."

entry_list.html

{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}

<style>


table.dataTable tbody tr.odd.selected {
 background-color:#acbad4
}

table.dataTable tbody tr.even.selected {
 background-color:#acbad5
}


</style>

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h2 class="text-gray-800">{% block title %}{% trans "Imported Entries" %}{% endblock %}</h2>
    <a role="button" class="btn btn-success" href="{% url 'import' %}"><i
            class="fas fa-plus-circle"></i> Import New Entires</a>
</div>

<button id="countbutton">Count rows</button>
<button id="deletebutton">Delete rows</button>

<!-- Content Row -->
<div class="row">
    <div class="col-md-12">
        <table id="entrytable"
               class="table-hover table display table-bordered"
               align="center"
               style="width:100%">
            <thead>
            <tr role="row">
                <th>id</th>
                <th>date</th>
                <th>amount</th>
                <th>price</th>
                <th>fee</th>
                <th>entry_type</th>
                <th>reg_fee</th>
                <th>transaction_id</th>
                <th>trade</th>
                <th>symbol</th>
                <!--                <th>created_by</th>-->
            </tr>
            </thead>

        </table>
    </div>
</div>

{% endblock %}


{% block js %}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>


<!--https://datatables.net/examples/server_side/select_rows.html-->
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>-->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>


<script>

$(document).ready(function() { // var selected = []; var table = $('#entrytable').DataTable({
        "order": [[ 0, "desc" ]],
        "processing": true,
        "ajax": "/api/entries/?format=datatables",
        "columns": [
            {
                "data": "id",
                "render": function ( data, type, row, meta ) {
                    return '<a type="button" class="" target="_blank" href="' + data + '">' + data + ' </a>';
                }
            },
            {"data": "date"},
            {"data": "amount"},
            {"data": "price"},
            {"data": "fee"},
            {"data": "entry_type"},
            {"data": "reg_fee"},
            {"data": "transaction_id"},
            {
                "data": "trade",
                "render": function ( data, type, row, meta ) {
                    if (data) {
                      return '<a type="button" target="_blank" class="" href="/trade/' + data + '"> ' + data + ' </a>';
                    } else {
                      // show nothing
                    }
                },
                "defaultContent": "",
            },
            {
                "data": "symbol",
                "defaultContent": "",
            },
           // {"data": "created_by"},
            ],


    });

    $('#entrytable tbody').on( 'click', 'tr', function () { $(this).toggleClass('selected');
    } );

    $('#countbutton').click( function () { alert( table.rows('.selected').data().length +' row(s) selected' ); } ); $('#deletebutton').click( function () {
        var selectedRows = table.rows({"selected": true});

        var dataObj = {
            // parse selectedRows to get object ids
            table.rows({"selected":true}).data().pluck('ID');
        }

        $.ajax({
            "url": '/api/entries/_id_/',
            "type": 'DELETE',
            "beforeSend": function(xhr) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token|escapejs }}");
            },
            "contentType": 'application/json',
            "data": dataObj,
            "success": function (data, status, xhr) {
                // remove the selected rows from the view
                table.row('.selected').remove().draw( false );
            }
        })
    } );


} );



</script>

{% endblock %}

Answer 1

작동하지 않는 항목을 파악하려면 논리를 분석해야합니다.

1. 브라우저 콘솔 ( '네트워크') 탭에서 DELETE 요청이 전송되는 내용을 확인하십시오. 예상 한 형식으로 전송되고 있습니까?

2. 자체적으로 DELETE 호출을합니다. curl, Postman 또는 Django Rest Framework 테스트 등을 사용하여 자체적으로 API 호출을 분리 할 수 ​​있습니다. 예상대로 행이 삭제되는지 확인하십시오. 백엔드에서 디버거를 실행하는 경우 실제로 문제를 찾는 속도가 빨라집니다. 이것이 작동하면 프런트 엔드를 디버깅 할 수 있습니다.

ID가 ajax 요청에 추가되지 않음을 암시하므로 브라우저 개발자 도구 Javascript 디버거를 사용하여 deletebutton클릭 로직에 중단 점을 설정할 수 있습니다 . 이 단계를 거치면 문제의 원인을 파악할 수 있습니다.

또한, 그냥 생각하지만 전화 pluck('ID')하십시오 pluck('id').