POST 请求创建多个对象 AJAX/Django Rest Framework

Posted 2023-02-24

【中文标题】POST 请求创建多个对象 AJAX/Django Rest Framework

【英文标题】：POST Request creates multiple objects AJAX/Django Rest Framework

【发布时间】：2021-08-01 16:46:54

【问题描述】：

我正在尝试使用户能够为仪表板创建新列表。我遇到的问题是，当用户创建新列表时，会发生以下行为：

用户创建第一个列表：新列表出现一次 用户创建第二个列表：第二个列表出现两次 用户创建第三个列表：第三个列表出现三次 等等。

我不确定为什么会发生这种行为。

Ajax 调用：

//create new list
const createNewList = function()
  $("#newlistmodal").modal('show');
  $("#save-list").click(function() 
    var listName = $("#newListName").val();
    $.ajax(
      type: 'POST',
      url: '/api/userlist/',
      data: 
      csrfmiddlewaretoken: document.querySelector('input[name="csrfmiddlewaretoken"]').value,
      'list_name' : listName
      ,
      success: function(data) 
        console.log(data.instance_id)
        var listId = data.instance_id;
        $("#newlistmodal").modal('hide');
          $("#userLists").append(
            `<li class="userlist" id="$listName" data-name="$listName" data-pk="$listId">
              $listName
                <i id="dropdown" class="ml-4 dropdown fas fa-ellipsis-h" type="button" data-toggle="dropdown"></i>
                <div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" id="$listName-edit" data-name="$listName" data-pk="$listId">Edit List</a>
                  <a class="dropdown-item" id="$listName-share" data-name="$listName" data-pk="$listId">Share</a>
                  <a class="dropdown-item" id="$listName-delete" data-name="$listName" data-pk="$listId">Delete</a>    
            </li>
            `)
      
    );
  );

Views.py（使用 DRF）

class UserListViewSet(viewsets.ModelViewSet):
    serializer_class = UserListSerializer
 
    def get_queryset(self):
        return UserList.objects.filter(user__username=self.request.user)
    
    def create(self, request):
        serializer_class = UserListSerializer

        if self.request.method == "POST":
            user = self.request.user.id
            list_name = request.data.get('list_name')
            data = 'user': user, 'list_name': list_name
            serializer = serializer_class(data=data)
            
            if serializer.is_valid():
                instance = serializer.save()
            
                return Response('status' : 'ok', 'user' : user, 'instance_id':instance.id, status=200)
    
            else:
                return Response('error' : serializer.errors, status=400)

序列化器：

class UserListSerializer(serializers.ModelSerializer): #this is what we worked on on October 1
    class Meta:
        model = UserList
        fields = ['id', 'user', 'list_name']

html：

   <div class="modal" id="newlistmodal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Create a New List</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label for="exampleFormControlInput1">Create a New List</label>
                <input type="email" class="form-control" id="newListName" placeholder="New List Name...">
              </div>
            </div>
            <div class="modal-footer">
              <button id="save-list" type="button" class="btn btn-primary">Save</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

【问题讨论】：

澄清一下：它们是正确创建的，在数据​​库中只创建一次，但在前端出现多次？

您好，我刚刚看了看，好像它也在数据库中创建了多个项目。

跟进问题。查看您共享的代码，似乎没有什么不合适的。你能告诉我：查看控制台，点击提交只调用一次API吗？你也可以分享你的UserListSerializer 代码吗？

你说yes I believe it is hitting the API once。你相信，还是你确定？检查并确保它很重要。要么在 Django 中打印日志，要么在浏览器中按 F12，转到网络选项卡，然后查看在提交列表名称时执行了多少次调用。要知道为什么要多次显示和创建事物，我们必须检查工作流程的每个步骤，看看哪里出了问题

检查过，它被多次击中。

【参考方案1】：

你确定$("#userLists") 是唯一的吗？例如如果对于每个成功的调用，您附加一个额外的 <li 和 id="userLists"，那么您的下一个调用将附加到两个元素而不是一个，依此类推。

【讨论】：

嘿，看起来它在数据库中创建了多个列表！