Django：Ajax实现莫态对话框

urls.py

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('cls/', views.classes),
    path('add_class/', views.add_class),
    path('del_class/', views.del_class),
    path('vi_class/', views.vi_class),
    path('students/', views.students),
    path('add_student/', views.add_student),
    path('vi_student/', views.vi_student),
    path('modal_add_class/', views.modal_add_class),
]

SQL.py

import pymysql
def get(sql):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql)
    data = cursor.fetchall()
    cursor.close()
    conn.close()
    return data

def get_sql(sql,args):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    data = cursor.fetchall()
    cursor.close()
    conn.close()
    return data

def mod_sql(sql,args):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    conn.commit()
    cursor.close()
    conn.close()

views.p

from django.shortcuts import render,HttpResponse,redirect
import pymysql


def classes(request):
    conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='',db='65day',charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("select id,title from class")
    data = cursor.fetchall()
    cursor.close()
    conn.close()



    return render(request,'classes.html',{"data":data})

def add_class(request):
    if request.method == 'GET':
        data=1
        return render(request, 'add_class.html', {"data": data})
    else:
        v = request.POST.get('title')
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("insert into class(title) values(%s)",v)
        conn.commit()
        cursor.close()
        conn.close()
        return redirect("/cls/")

def del_class(request):
    if request.method == 'GET':
        v = request.GET.get('i')
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("delete from class where id = %s",v)
        conn.commit()
        cursor.close()
        conn.close()

        return redirect('/cls/')
    else:

        return HttpResponse('del')

def vi_class(request):
    if request.method == 'GET':
        v = request.GET.get('i')
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("select id,title from class where id = %s",v)
        data = cursor.fetchall()
        data = data[0]
        # data = data[0].get('title')
        cursor.close()
        conn.close()

        return render(request,'vi_class.html',{'init':data})
    else:
        i = request.GET.get('i')
        v = request.POST.get('title')
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("update class set title=%s where id=%s",[v,i])
        conn.commit()
        cursor.close()
        conn.close()

        return redirect('/cls/')

def students(request):
    if request.method == 'GET':
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("select student.id,student.name,class.title from student LEFT JOIN class on student.cid = class.id")
        data = cursor.fetchall()

        cursor.close()
        conn.close()

        return render(request,'studens.html',{"data":data})
    else:


        return redirect('/cls/')

def add_student(request):
    if request.method == 'GET':
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("select * from class")
        data = cursor.fetchall()

        cursor.close()
        conn.close()

        return render(request,'add_student.html',{'data':data})
    else:
        data = request.POST
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='', db='65day', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        cursor.execute("insert into student(name,cid) values(%s,%s)",[data['name'],data['class']])

        conn.commit()
        cursor.close()
        conn.close()


        return redirect('/students/')

def vi_student(request):
    from SQL import SQL
    if request.method == 'GET':
        i = request.GET.get('i')
        name = SQL.get_sql('select id,cid,name from student where id = %s',i)[0]
        cid = SQL.get('select id,title from class')
        print(cid,name)
        return render(request,'vi_student.html',{'name':name,'cid':cid})
    else:
        data = request.POST
        i = request.GET.get('i')
        print(data['name'],data['class'],i)
        SQL.mod_sql('update student set name=%s,cid=%s where id = %s',[data['name'],data['class'],i])
        return redirect('/students/')

def modal_add_class(request):
    from SQL import SQL
    if request.method == 'GET':

        return
    else:
        title = request.POST.get('title')
        if len(title) > 0:
            SQL.mod_sql('insert into class(title) values(%s)',[title])
            return HttpResponse('ok')

        else:
            return HttpResponse('no')

classes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: .4;
            z-index: 999;
        }

        .modal{
            z-index: 1000;
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            margin-left: -200px;
            margin-top: -150px;
        }
    </style>
</head>
<body>
<h1>班级列表</h1>
<table>
    <thead>
    <div>
        <a href="/add_class/">添加</a>
        <a onclick="showmodal()">模态对话框添加</a>
    </div>

    <tr>
        <th>ID</th>
        <th>班级名称</th>
    </tr>
    </thead>
    <tbody>
        {% for row in data %}
            <tr>
            <td>{{ row.id }}</td>
            <td>{{ row.title }}</td>
                <td><a href="/vi_class/?i={{ row.id }}">编辑</a></td>
                <td><a href="/del_class/?i={{ row.id }}">删除</a></td>

            </tr>
        {% endfor %}
    </tbody>

</table>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="modal hide">
    <form method="POST" action="/modal_add_class/">
        <p><input id="title" type="text" name="title"></p>
        <p><input type="button" value="提交" onclick="AjaxSend()"></p>
    </form>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script>
    function showmodal(){
        document.getElementById('shadow').classList.remove('hide')
        document.getElementById('modal').classList.remove('hide')

    }

    // Ajax 函数
    function AjaxSend() {
        $.ajax({
            // url 表示偷偷提交的URL地址。 type 表示提交方式。 data 表示提交的内容
            url:'/modal_add_class/',
            type:'POST',
            data:{'title':$('#title').val()},

            success:function (data) {
                // 当服务端处理完成后，返回数据时，该函数自动调用。
                // data 为服务端return返回的值
                console.log(data)
                if(data == 'ok'){
                     // Ajax 无法用 render('/cls/') 进行跳转，需要用 location.href='/URL/'
                    location.href = '/cls/'
                }else {
                    alert('班级 不能为空')
                }

            }
        })
    }


</script>

</body>
</html>