通过AJAX Post

如何解决通过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以禁用表单提交。