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

Posted

技术标签:

【中文标题】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") 是唯一的吗?例如如果对于每个成功的调用,您附加一个额外的 &lt;liid="userLists",那么您的下一个调用将附加到两个元素而不是一个,依此类推。

【讨论】:

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

以上是关于POST 请求创建多个对象 AJAX/Django Rest Framework的主要内容,如果未能解决你的问题,请参考以下文章

将多个对象从Angular控制器POST到Web API 2

500(内部服务器错误)AJAX Django

如何使用模型视图集和 POST 请求创建对象?

如何为POST,GET等多个Http请求创建单一逻辑应用程序

axios 本地配置多个类型请求

- 更新 - Rails API 应用程序使用来自控制器的 POST 请求一次创建不同模型的多个嵌套记录