Question

我正在一个项目中，其中有一个删除按钮从表中删除该行。但是，每当我删除条目时，都会重新加载列表页面。我不希望它重新加载。我只希望它从列表页面中删除条目，但是我对ajax不好。请帮助我的代码。预先感谢。

centrelist.html

 <script>
 $(document).on('click','#delete',function(){
 var a ;
 a=confirm("Do you really want to delete the user?");
 if(a==true){
  var url = "{% url 'NewApp:centredelete' pk=1%}"
  var id = $(this).attr('name')

  document.location.href = url.replace('1',id);
 }
});
</script>

 <tbody>
    {% for c in centres %}
       <tr>
         <td>{{ c.name }}</td>
         <td>{{ c.address }}</td>
         <td>{{ c.contact  }}</td>
         <td>{{ c.phone }}</td>
         <td><a href="{% url 'NewApp:centreupdate' slug=c.slug %} " style="color:black; margin-left:8px"><span class="glyphicon glyphicon-edit"></span></i></a><a href="#" style="color:black ;margin_left:8px;" id="delete" name="{{c.id}}" ><span><i class="glyphicon glyphicon-trash"></span></i></a></td>
        </tr>
     {% endfor %}
  </tbody>

views.py

def CentreDeleteView(request, pk):
  centre = Centre.objects.get(pk=pk)
  centre.delete()
  return HttpResponseRedirect(reverse('NewApp:centrelist'))

Answer 1

您可以使用$.get()在后台打开URL，而无需重新加载。

在加载URL之后，该元素将从数据库中删除，您可以删除HTML表中的行

 <script>
    $(document).on('click','#delete',function()
    {
        var a ;
        a=confirm("Do you really want to delete the user?");
        if(a==true)
        {
             var url = "{% url 'NewApp:centredelete' pk=1%}"
             var id = $(this).attr('name')
             url = url.replace('1', id);
             // Open url in background
             $.get(url, function(data)
             {
                 // Delete element from table
                 $(this).parent().parent().remove();
             });
        }
    });
</script>

Answer 2

我认为要避免刷新页面行为，您需要做两件事：

单击删除锚点时，应防止浏览器跟踪链接。
收到请求后，您应该删除包含目标tr的html节点

尝试使用与此代码相似的内容。可能需要对代码进行一些更改以处理错误情况，并根据需要添加确认对话框。

<tbody>
    {% for c in centres %}
       <tr data-row-item-id="{{ c.pk }}">
         <td>{{ c.name }}</td>
         <td>{{ c.address }}</td>
         <td>{{ c.contact  }}</td>
         <td>{{ c.phone }}</td>
         <td>
            <a href="{% url 'NewApp:centreupdate' slug=c.slug %} " style="color:black; margin-left:8px">
            <span class="glyphicon glyphicon-edit"></span>
                </i></a>

           <a data-action="delete" 
              data-item-id="{{ c.pk }}"
              data-endpoint="{% url 'NewApp:centredelete' c.pk %}"
               href="#" 
               style="color:black ;margin_left:8px;" 
               id="delete" 
               name="{{c.id}}" >
                <span><i class="glyphicon glyphicon-trash"></span></i></a>
          </td>
        </tr>
     {% endfor %}
  </tbody>


document.addEventListener("DOMContentLoaded", () => {
    function addDeleteEventListener(btn) {
        btn.addEventListener("click", event => {
            event.preventDefault()
            const endpoint = btn.dataset.endpoint
            $.post(endpoint)
                .done(() => {
                    const elementToDelete = document.querySelector(`[data-row-item-id=${btn.dataset.itemId}]`)
                    elementToDelete.parentNode.removeChild(elementToDelete)
                })
        })
    }


    const deleteButttons = document.querySelectorAll("[data-action=delete]")
    deleteButtons.forEach(btn => {
        addDeleteEventListener(btn)
    })
})

如何将ajax添加到删除表行的按钮？

2 个答案: