如何在 django 中实现关于 ajax 成功功能的烤面包机消息？答案

【问题标题】：How do I implement a toaster message on success function of ajax in django?如何在 django 中实现关于 ajax 成功功能的烤面包机消息？
【发布时间】：2019-12-02 05:33:53
【问题描述】：

我正在处理一个我必须从列表中删除条目的问题。我需要在删除项目时显示一条烤面包机消息并且我想删除已删除的元素而不刷新？我该怎么做？我在网上尝试了很多链接，但没有一个对我有用。

views.py

 def centre_delete(request):
     if request.is_ajax():
         id = request.POST.get('id')
         Centre.objects.get(pk=id).delete()
         message = "Deleted Successfully"
     else:
         message = "Not Ajax"
     return HttpResponse(message)

center_list.html

   <script type="text/javascript">
       $(document).ready(function() {
       $(".del").click(function(){
       swal(Delete centre?);
       $.ajax({
          type: "POST",
          url: "/NewApp/centredelete/",
          data: {
            'id': $('#cendel').val()
          },
          success: function () {
               #what should go here?
        }
      });
   return false;
      });
    });
   </script>

 <body>
     {% 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></a>   
              <input type="hidden" id="cendel"  value="{{ c.id }}">
              <a class="btn btn-primary del" type="button" id="del">Delete</a></td>                                                                
       </tr>
  {% endfor %} 
 </body>

【问题讨论】：

标签： django ajax view django-views django-messages

【解决方案1】：

只要成功，您就可以隐藏表格的那些特定行。当然你必须放行ID

你可以设置<tr id="{{ c.id }}">

在脚本中：

var update_table = document.getElementById('id').style;
update_table.display = 'none';

对于 toast 消息，您可以从这里实现 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar

还有其他实现方式。希望这会有所帮助。

【讨论】：