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

Question

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

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

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

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>

Answer 1

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