如何解决通过AJAX Post
我有这个AJAX发布功能,可以按预期工作,但是问题在于删除按钮。我需要将对象的ID添加到“删除”按钮的值中,因为我还有另一个removeFriend函数依赖于“删除”按钮的值来删除正确的行。
function addNewFriend(formData){
const friendForm = document.querySelector('#friend-form');
const nicknameInput = document.querySelector('#id_nick_name');
$.ajax({
type: 'POST',url: "/friend",data: formData,success: function (response) {
// on successfull creating object
// 1. clear the form.
friendForm.reset();
// 2. focus to nickname input
nicknameInput.focus();
// display the new friend to table.
var instance = JSON.parse(response["instance"]);
var fields = instance[0]["fields"];
const row = document.createElement('tr');
row.innerHTML = `
<td>${fields["nick_name"]}</td>
<td>${fields["first_name"]}</td>
<td>${fields["last_name"]}</td>
<td>${fields["likes"]}</td>
<td>${fields["dob"]}</td>
<td>${fields["lives_in"]}</td>
<td><button type="button" class="remove-friend" name="remove-friend" value="${fields["id"]}">Remove</button></td>
`;
const tbody = document.querySelector('tbody');
tbody.appendChild(row);
},error: function (response) {
// alert the error if any error occured
alert(response["responseJSON"]["error"]);
}
})
}
当我创建一个新朋友并将其添加到网页底部的表格中时,如果我立即尝试删除该朋友,则会引发错误。刷新页面后,就可以删除该朋友了。添加新朋友之后,我立即转到Chrome浏览器的“元素”栏,我看到该新添加的朋友的“删除”按钮值为“未定义”,因此我知道错误在于我如何动态创建按钮并分配值。
我尝试将“删除”按钮的值设置为:
value=${instance["id"]}
并具有相同的结果。
这是我的 views.py
def postFriend(request):
if request.is_ajax and request.method == "POST":
form = FriendForm(request.POST)
if form.is_valid():
instance = form.save()
ser_instance = serializers.serialize('json',[ instance,])
return JsonResponse({"instance": ser_instance},status=200)
else:
return JsonResponse({"error": form.errors},status=400)
return JsonResponse({"error": ""},status=400)
谁能看到我如何获取新创建的朋友的对象ID,以便我可以正确设置“删除”按钮的值?
按要求添加:removeFriend函数
document.querySelector('tbody').addEventListener('click',function(e){
if(e.target.innerHTML == 'Remove'){
e.preventDefault();
console.log("Remove friend btn clicked?");
console.log(e.target.value);
removeFriend(e.target.value)
}
})
function removeFriend(id){
let dataId = `${id}`
$.ajax({
type: 'POST',url: `/delete/friend`,data: {
friend_id: `${id}`,csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),action: 'post'
},success: function(json){
let tbody = document.querySelector('tbody');
let row = tbody.querySelector(`tr[data-id="${id}"]`);
console.log(row);
row.remove();
alert('friend has been deleted')
},error: function(xhr,errmsg,err) {
console.log(error)
}
})
}
解决方法
稍微调整一下功能:
function addNewFriend(formData){
...
<td><button type="button" class="remove-friend" name="remove-friend" onclick="removeFriend(event,'${fields["id"]}')">Remove</button></td>
...
}
function removeFriend(e,id){
e.preventDefault();
...
}
您可以摆脱document.querySelector('tbody')
的整个部分。
我们在这里所做的是为按钮定义一个onclick
属性,该属性将直接触发removeFriend
函数。
编辑:直接在preventDefault
函数中添加了removeFriend
以禁用表单提交。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。