前段页面删除弹窗实现

1、定义删除按钮及删除函数

<a class="btn btn-danger btn-xs" onclick="showDelete({{ obj.id }});">删除</a>

2，编写弹窗内容

选择bootstrap→js插件→模态框的动态实例：launch demo modal

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3、该弹出框适合添加修改内容，可把红色代码部分替换成警告框实例：

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

<div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h4>Oh snap! You got an error!</h4>
      <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
      <p>
        <button type="button" class="btn btn-danger">Take this action</button>
        <button type="button" class="btn btn-default">Or do this</button>
      </p>
    </div>

4、整体就变成如下内容

    <!-- Modal -->
    <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>Oh snap! You got an error!</h4>
                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                    eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                <p style="margin-top: 10px">
                    <button type="button" class="btn btn-danger" onclick="confirmDelete()">确定删除</button>
                    <button type="button" class="btn btn-default" onclick="hideDelete()">取消</button>
                </p>
            </div>
        </div>
    </div>

5、js中编写1中定义的函数

    <script>
        var DELETE_ID

        function showDelete(id) {
            DELETE_ID = id
            $('#myDeleteModal').modal()
        }
        function hideDelete(){
            $('#myDeleteModal').modal('hide')
        }
        function confirmDelete(){

        }
    </script>

6、js中可以利用全局变量使函数间调用参数

7、可以利用jquery中封装的ajax向后端视图函数发送请求

方法一：相当于向后台发送：/tpl/delete/?pk=123

$.ajax({
url:"/tpl/delete/",
type:"GET",
data:{pk:123}
})

方法二：

$.ajax({
url:"/tpl/“+DELETE_ID+”/delete/",

type:"GET",
dataType:"JSON",
success:function(res){ //回调函数，发送成功后会返回一个值。
console.log(res);
}
})

7.2例如：

function confirmDelete() {
            // 1.获取要删除的ID
            console.log("要删除的ID->", DELETE_ID);

            // 需要将请求发送到后端，获取要删除ID，根据ID删除; -> ajax
            $.ajax({
                url: "/tpl/" + DELETE_ID + "/delete/",   //
                type: "GET",
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 删除成功
                        $('#myDeleteModal').modal('hide');
                        location.href = location.href;
                        //location.reload();

                    } else {
                        // 删除失败
                        alert("删除失败");
                    }
                }
            })

8、后端视图url中定义路径"/tpl/" + DELETE_ID + "/delete/",

path('tpl/<int:pk>/delete/', tpl.tpl_delete, name='tpl_delete'),

9、定义视图函数

def tpl_delete(request, pk):
    try:
        models.Template.objects.filter(id=pk).delete()
        return JsonResponse({"status": True})
    except Exception as e:
        return JsonResponse({"status": False})