Django框架学习笔记(四)

最新推荐文章于 2024-10-13 09:28:28 发布

程序媛Cinderella

最新推荐文章于 2024-10-13 09:28:28 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： Django

本文链接：https://blog.youkuaiyun.com/Stripeybaby/article/details/86564087

Django 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在班级表管理中使用模态框进行编辑和删除操作，通过Ajax与后端交互，实现实时更新而无需刷新页面。文章详细展示了在Django框架下，前后端分离的实现方式，包括视图函数、HTML模板和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇简单了解了模态框和Ajax的结合使用，在此基础上，还可以实现班级表的对话框式的编辑和删除操作
urls.py中增加：

path('modal_edit_class/', views.modal_edit_class),
path('modal_del_class/', views.modal_del_class),

views.py增加：

def modal_add_class(request):
    class_title = request.POST.get('title')
    if len(class_title) > 0:
        sqlHelper.modify("insert into class(title) values(%s)", [class_title])
        return HttpResponse('ok')
        # return redirect('/classes')
    else:
        return HttpResponse('标题不能为空')


def modal_edit_class(request):
    ret = {'status': True, 'message': None}
    try:
        class_id = request.POST.get('edit_id')
        class_title = request.POST.get('edit_title')
        sqlHelper.modify("update class set title=%s where id=%s",
                         [class_title, class_id])
    except Exception as e:
        ret['status'] = False
        ret['message'] = str(e)
    return HttpResponse(json.dumps(ret))


def modal_del_class(request):
    ret = {'status': True, 'message': None}
    try:
        class_id = request.POST.get('edit_id')
        sqlHelper.modify("delete from class where id=%s", [class_id])
    except Exception as e:
        ret['status'] = False
        ret['message'] = str(e)
    return HttpResponse(json.dumps(ret))

classes.html修改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>
    <style type="text/css">
        .hide{display: none;}
        .shadow{
            position: fixed;
            left:0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.4);
            z-index: 9999;
        }
        .modal{
            z-index: 10000;
            position: fixed;
            left: 50%;
            top: 50%;
            width: 400px;
            height: 300px;
            background-color: #fff;
            margin-left: -200px;
            margin-top: -150px;
        }
    </style>
</head>
<body>
<h1>班级列表</h1>
<div>
    <a href="/add_class/">添加班级</a>
    <a href="#" onclick="showModal()">对话框添加</a>
</div>

<div id="shadow" class="shadow hide">

</div>
{#<div id="modal" class="modal hide">#}
{#    <h1>添加班级</h1>#}
{#    form表单提交，页面会刷新#}
{#    <form action="/modal_add_class/" method="post">#}
{#        <label for="class_name">班级名称：</label>#}
{#        <input type="text" id="class_name" name="title"/>#}
{#        <input type="submit" value="提交">#}
{#    </form>#}
{##}
{#</div>#}
<div id="modal" class="modal hide">
    <h1>添加班级</h1>
    <label for="class_name">班级名称：</label>
    <input type="text" id="class_name" name="title"/><br/>
    <input type="button" value="提交" onclick="ajaxSend();"/>
    <input type="button" value="取消" onclick="cancelSend();"/>
    <span style="color:red;" id="errorMsg"></span>
</div>

<div id="editModal" class="modal hide">
    <h1>编辑班级</h1>
    <label for="class_name">班级名称：</label>
    <input type="text" id="editId" name="editId" hidden/>
    <input type="text" id="editTitle" name="editTitle"/>
    <input type="button" value="提交" onclick="editAjaxSend()"/>
    <input type="button" value="取消" onclick="cancelSend()"/>
    <span id="errorMsg"></span>
</div>
<table border="1">
    <thead>
    <tr>
        <th>班级ID</th>
        <th>班级名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for class_item in class_list %}
        <tr>
            <td>{{ class_item.id }}</td>
            <td>{{ class_item.title }}</td>
            <td>
                <a href="#" onclick="modalEdit(this)">对话框编辑</a>
                <a href="/edit_class/?cid={{ class_item.id }}">编辑</a>
                |
                <a href="/del_class/?cid={{ class_item.id }}">删除</a>
                <a onclick="modalDel(this)">对话框删除</a>
            </td>
        </tr>
    {% endfor %}

    </tbody>
</table>
<script type="text/javascript" src="/static/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    function showModal(){
        document.getElementById('shadow').classList.remove('hide');
        document.getElementById('modal').classList.remove('hide');
    }

    function cancelSend(){
        document.getElementById('shadow').classList.add('hide');
        document.getElementById('modal').classList.add('hide');
        document.getElementById('editModal').classList.add('hide');
    }

    function modalEdit(that){
        document.getElementById('shadow').classList.remove('hide');
        document.getElementById('editModal').classList.remove('hide');
        /**
         * 1.获取当前点击标签
         * 2.当前标签父标签，再找其上方标签
         * 3.获取当前行班级名称，赋值到编辑对话框中
         */
        let row = $(that).parent().prevAll();
        $("#editTitle").val($(row[0]).text());
        $("#editId").val($(row[1]).text());
    }

    function ajaxSend(){
        $.ajax({
            url:'/modal_add_class/',
            type: 'post',
            data: {'title': $("#class_name").val()},
            success:function(data){
                //当服务器处理完成后返回数据时，函数自动调用，服务端返回的数据存在data中
                if(data === 'ok'){
                    location.href='/classes/';
                }else{
                   $("#errorMsg").text(data);
                }
            }
        })
    }

    function editAjaxSend(){
        $.ajax({
            url:'/modal_edit_class/',
            type:'post',
            data:{'edit_id': $("#editId").val(),'edit_title':$("#editTitle").val() },
            success:function(data){
                // data是字符串类型
                // JSON.parse(字符串) ==> 对象
                // JSON.stringify(对象)=> 字符串
                data = JSON.parse(data);
                if(data.status){
                    location.reload(); // 当前页面刷新
                }else{
                    alert(data.message);
                }
            }
        })
    }

    function modalDel(that){
        let edit_id = $($(that).parent().prevAll()[1]).text();
        $.ajax({
            url:'/modal_del_class/',
            type:'post',
            data:{'edit_id':edit_id},
            success:function(data){
                data = JSON.parse(data);
                if(data.status){
                    location.reload(); // 当前页面刷新
                }else{
                    alert(data.message);
                }
            }
        })
    }
</script>
</body>
</html>