带有Django Rest框架和DataTables的POST返回400错误请求

Question

当我使用DRF的可浏览API时，我可以发布和删除。试图通过我的tradingbook.html（w/DataTables）复制此消息（新建/编辑/删除）：错误请求： /api/trading/带"POST /api/trading/？格式=数据

我在这件事上花了太多时间，我永远都不会承认。

class TradingBook(models.Model):
trader =        models.TextField(max_length=10)
status =        models.TextField(max_length=10)
price =         models.TextField(max_length=10)
volume =        models.TextField(max_length=10)
index =         models.TextField(max_length=10)
cpty =          models.TextField(max_length=10)

class Meta:
        ordering = ['trader']

def __str__(self):
    return self.trader

连载器。派克

class TradingBookSerializer(serializers.ModelSerializer):
id = serializers.IntegerField(read_only=True)

class Meta:
    model = TradingBook
    fields = "__all__" 

DT_RowId = serializers.SerializerMethodField() 

def get_DT_RowId(self, TradingBook):
    return 'row_%d' % TradingBook.pk

意见。派克

@csrf_exempt#@csrf_protect#@ensure_csrf_cookie
def tradingsomething(request):  
    return render(request, 'trading/tradingbook.html')

@method_decorator(login_required, name="dispatch")
class TradingBookViewSet(viewsets.ModelViewSet):
        queryset = TradingBook.objects.all()#.order_by('trader')
        permission_classes  = [permissions.AllowAny]   
        serializer_class = TradingBookSerializer

urls.py

path('trading', trading_views.tradingsomething),
    path('trading/<int:pk>/', trading_views.TradingBookViewSet, name='TradingBook'),

    path('api/', include(router.urls)),

urlpatterns += router.urls

还有我的传统书籍。html

<script>
$(document).ready(function() {

    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
    });
    var csrftoken =  jQuery("[name=csrfmiddlewaretoken]").val(); // <--important
    
    
    editor = new $.fn.dataTable.Editor( {
        ajax:"/api/trading/?format=datatables&keep=id",
        table: "#TradingBook",
        fields: [ 
            {   label:  "trader:",
                name:   "trader"
             },
            {   label:  "status:",
                name:   "status"
             }, 
            {   label:  "price:",
                name:   "price"
             }, 
            {   label:  "volume:",
                name:   "volume",
             },
            {   label:  "index:",
                name:   "index",
             },
            {   label:  "cpty:",
                name:   "cpty",
             },
        ]
     } );    
    $('#TradingBook').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
     } );

    var table = $('#TradingBook').DataTable({
        ajax:"/api/trading/?format=datatables&keep=id",
        dom: 'Bfrtip',
        headers: {'X-CSRFToken': '{{ csrftoken }}'},
        processing: true,
        serverSide: true,
        select: true, 
        type: "POST",  
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search..."
         },
        columns: [
            {"data": "trader"},
            {"data": "status"},
            {"data": "price"},
            {"data": "volume"},
            {"data": "index"},
            {"data": "cpty"},
         ],
        select: true,
        buttons: [
            {extend: "create", editor: editor},
            {extend: "edit", editor: editor},
            {extend: "remove", editor: editor}     
         ],
     });
    table.buttons().container()
        .appendTo($('.col-md-6:eq(0)', table.table().container()));

 });

</script>

{% block content %} 
  {% csrf_token %}
 <div class="container" style="font-size: .9em;">
        <div class="row">
            <div class="col-sm-12">
                <table id="TradingBook" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                    
                    <tr>
                    <th data-data="trader">trader</th>
                    <th data-data="status">status:</th>
                    <th data-data="price">price:</th>
                    <th data-data="volume">volume:</th>
                    <th data-data="index">index</th>
                    <th data-data="cpty">Cprty:</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

我的网络检查员

这就是我尝试从中编辑时发生的情况http://127.0.0.1:8000/trading终端返回错误请求：/api/trading/[15/May/2020 14:06:06]“POST/api/trading/？format=datatables

这是我第一次敢于提出问题，并希望在描述上更透彻。我担心这对给出答案的人来说可能微不足道，但我非常感谢你抽出时间。

Answer 1

我也遇到了同样的问题，对我来说，问题是数据表声明中的一个字段名称与我的模型不匹配。只是一个愚蠢的错误。

Answer 2

Delete现在通过DataTables JS插入工作

remove: {
            type: 'DELETE',
            headers: { "X-CSRFTOKEN": csrftoken },
            url:        "/api/trading/_id_/",
            contentType: 'application/json',
            data: function ( d ) {
                return JSON.stringify( d );
            },
        },