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">×</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"
,那么您的下一个调用将附加到两个元素而不是一个,依此类推。
【讨论】:
嘿,看起来它在数据库中创建了多个列表!以上是关于POST 请求创建多个对象 AJAX/Django Rest Framework的主要内容,如果未能解决你的问题,请参考以下文章
将多个对象从Angular控制器POST到Web API 2