使用 Django Rest Framework 的 Ajax POST 請求上的 400（錯誤請求）

Question

我想我會在這里問這個，因為我不太確定我哪里出錯了。 我正在嘗試使用 Django Rest Framework Class 通過 AJAX 執行 POST 請求。 但是，每當事件觸發時，我都會收到以下錯誤：

OST http://127.0.0.1:8000/api/uservenue/ 400 (Bad Request)

這是出現在堆棧跟蹤中的內容：

{"list":["This field is required."],"venue":["This field is required."]}

語境

我試圖做到這一點，當用戶單擊“添加到列表”按鈕時，它會向用戶定義的列表發送一個 cafeName（以及最終的其他詳細信息）。

我想知道是否有人可以查看我的代碼並就我哪里出錯給我一些指導？

編碼

這是相關的模型：

class UserVenue(models.Model):
    venue = models.ForeignKey(mapCafes, on_delete=models.PROTECT)  
    list = models.ForeignKey(UserList, on_delete=models.PROTECT)
Here is the relevant serializer.py

class UserVenueSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserVenue
        fields = ['list', 'venue']

這是相關的網址

router = DefaultRouter() #need help understanding router register
router.register('userlist', views.UserList)
router.register('uservenue', views.UserVenue)

這是相關的views.py

class UserVenue(viewsets.ModelViewSet):
    serializer_class = UserVenueSerializer
    queryset = UserVenue.objects.all()

    @ensure_csrf_cookie
    def get_queryset(self):
        cafeName = self.request.GET.get('cafeName', None)
        print(cafeName)

        return UserVenue.objects.all()

最后，這里是包含 CSRF 代碼的 ajax 調用。

var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

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);
    }
  }
});


$.ajax({
  type: "POST",
   url : '/api/uservenue/',
   //dataType: "json", //I tried using this and commenting it out and it made no diff.
   //contentType: "application/json", //I tried using this and commenting it out and it made no diff.
   data: {
     'cafeName': cafeName,
     'list_id':  1,
     'csrfmiddlewaretoken': document.querySelector('input[name="csrfmiddlewaretoken"]').value,
   },

      success: function(data){
      //$("user-list").html(data);
      console.log('User clicked: ' +  data)

      },
      failure: function(errMsg) {
        alert(errMsg);
      }
    });

我不確定這是 Ajax 中的錯誤還是我的視圖中的錯誤？

謝謝！

Answer 1

原來我正在隱藏一個變量。 我已經導入了 UserVenue 並試圖命名類 UserVenue 這導致了整體問題。

重命名為 views.py 類到 UserVenueViewset 修復了它。

Answer 2

讓我們從一個簡單的模式開始，我們可以深入到需要的地方：

首先在您的 js 文件中，您需要執行以下操作：

// js function is executed when button is clicked:
function add_to_list() {
        
    // execute ajax request:
    $.ajax({
        url : 'add_to_list',
        method : 'POST',
        data : {
            csrfmiddlewaretoken: 'the_csrf_token',
            cafe_name : 'the_cafe_name',
            ...
        },
        success: add_to_list_success,
    });
    
} $('#button-id').click(add_to_list);


// executes on successfully contacting backend:
function add_to_list_success(response) {
    
    // unpack response (context variable from view function)
    data = response.data;        
  
    ...     
}

然后，在您的 views.py 中，您可以執行以下操作：

from django.http import HttpResponse
import json

def add_to_list(request):
    
    # unpack POST data:
    cafe_name = request.POST['cafe_name']
    ...
    
    # conduct other logic:
    ...
    
    # pack context:
    context = json.dumps({
       'data' : 'some_data'
    })
    
    return HttpResponse(context)
    

當然，不要忘記將視圖函數路由到 urls.py 中的 'add_to_list' url