Django ajax操作

models.py

from django.db import models

# Create your models here.
class Department(models.Model):
    title = models.CharField(verbose_name="部门名称", max_length=32)

    def __str__(self):
        return self.title


class UserInfo(models.Model):
    username = models.CharField(verbose_name="员工姓名",max_length=32)
    password = models.CharField(verbose_name="登陆密码",max_length=32)
    gender_choice = (
        (1,"男"),
        (2,"女")
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choice)
    salary = models.DecimalField(verbose_name="收入", max_digits=10, decimal_places=2,default=0)
    phone = models.CharField(verbose_name="电话号码", max_length=11)
    create_time = models.DateField(verbose_name="入职日期")
    # CASCADE：级联删除  SET_NULL:置空, null=True:数据表字段允许为空,blank=True:表单提交字段允许为空
    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.SET_NULL, null=True, blank=True)
    role_choice = (
        (1,"员工"),
        (2,"管理员")
    )
    role = models.SmallIntegerField(verbose_name="身份",choices=role_choice)

views中的admin.py

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
from django.shortcuts import render
from admin_app import models
from django import forms

class DepartMnet(forms.ModelForm):
    class Meta:
        model = models.Department
        fields = "__all__"

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 修改生成的input标签的样式
        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control"}

class UserInfoform(forms.ModelForm):
    class Meta:
        model = models.UserInfo
        fields = "__all__"

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 修改生成的input标签的样式
        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control"}


def admin(request):
    department=models.Department.objects.all()
    userlist=models.UserInfo.objects.all()
    form = DepartMnet()
    userform=UserInfoform()
    content = {
        "form":form,
        'department':department,
        'userlist':userlist,
        'userform':userform
    }
    return render(request, "admin/admin.html",content)



@csrf_exempt
def add_depart(request):
    form = DepartMnet(data=request.POST)
    if form.is_valid():
        form.save()
        return JsonResponse({"status":True})
    return JsonResponse({"status": False, "error":form.errors})

@csrf_exempt
def add_userinfo(request):
    form = UserInfoform(data=request.POST)
    if form.is_valid():
        form.save()
        return JsonResponse({"status":True})
    return JsonResponse({"status": False, "error":form.errors})

def userinfo_view(request):
    id = request.GET.get('id')
    userinfo = models.UserInfo.objects.filter(id=id).values("username","password","gender","salary","phone","create_time","depart","role").first()
    if userinfo :
        result = {
             "status": True,
             "data": userinfo
         }
        return JsonResponse(result)
    else:
        return JsonResponse({"status": False, "error":"没有这条记录"})


@csrf_exempt
def userinfo_update(request):
    id=request.GET.get('id')
    userinfo=models.UserInfo.objects.filter(id=id).first()
    form=UserInfoform(data=request.POST,instance=userinfo)
    if form.is_valid():
        form.save()
        return JsonResponse({"status": True})
    return JsonResponse({"status": False, "error": form.errors})


def userinfo_delete(request):
    try:
        models.UserInfo.objects.get(id=request.GET.get('id')).delete()
        return JsonResponse({"status": True})
    except:
        return JsonResponse({"status": False, "error":'操作失败，请重试'})

urls.py

from django.urls import path,include
from admin_app.views import admin

urlpatterns = [
    path("", admin.admin, name="admin"),
    path("add/depart/", admin.add_depart, name="add_depart"),
    path("add/userinfo/", admin.add_userinfo, name="add_userinfo"),
    path("get/userinfo/", admin.userinfo_view, name="userinfo_view"),
    path("update/userinfo/", admin.userinfo_update, name="userinfo_update"),
    path("del/userinfo/", admin.userinfo_delete, name="userinfo_delete"),
]

外层urls.py

 path("admin/", include("admin_app.urls")),

admin.html

{% extends "layout_admin/layout_admin.html" %}

{%  block css %}
     <style>
        #departmentlist{
            position: absolute;
            top:100px;
            left:50%;
            width: 160px;
            display: none;
            z-index: 99;
        }
        .crm-card{
            margin-top: 5px;
        }

     </style>
{% endblock %}
{% block content %}
    <div id="crm-admin-content">

        <div class="crm-card">
            <button class="btn btn-success" id="btn-add">创建部门</button>
            <button class="btn btn-success" id="btn-department">查看部门</button>
            <button class="btn btn-success" id="btn-adduser">新建员工</button>
        </div>
        <!--新增部门-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="crm-card">
                        <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">添加部门信息</h4>
                        </div>
                        <div class="modal-body">
                            <form action="" id="formDepart">
                                {% for item in form %}
                                    {{ item }}
                                    <span style="color: red"></span>
                                {% endfor %}
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-success" id="btnSave">保存</button>
                        </div>
                    </div>
                </div>
            </div>
           <!--部门列表-->
          <div class="crm-card" id="departmentlist">
              <table class="table table-striped">
                  <thead>
                     <tr>
                         <td>部门名称</td>
                     </tr>
                  </thead>
                  <tbody>
                     {% for item in department %}
                         <tr>
                            <td>{{ item }}</td>
                         </tr>
                     {% endfor %}
                  </tbody>
              </table>

          </div>

         <!--员工列表-->
         <div class="crm-card"  id="userlist">
              <table class="table table-striped">
                  <thead>
                     <tr>
                         <td>名称</td>
                         <td>性别</td>
                         <td>收入</td>
                         <td>电话</td>
                         <td>入职时间</td>
                         <td>所属部门</td>
                         <td>用户身份</td>
                         <td>操作</td>
                     </tr>
                  </thead>
                  <tbody>
                     {% for item in userlist %}
                         <tr>
                             <td>{{ item.username }}</td>
                             <td>{{ item.get_gender_display }}</td>
                             <td>{{ item.salary }}</td>
                             <td>{{ item.phone }}</td>
                             <td>{{ item.create_time }}</td>
                             <td>{{ item.depart }}</td>
                             <td>{{ item.get_role_display }}</td>
                             <td>
                                 <button class="userinfoedit btn btn-info " uid="{{ item.id }}">✏️</button>
                                 <button class="userinfodel btn btn-info" uid="{{ item.id }}">🗑️</button>
                             </td>
                         </tr>
                     {% endfor %}
                  </tbody>
              </table>

          </div>
         <!--添加员工-->
          <div class="modal fade" id="userinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="crm-card">
                        <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">添加员工信息</h4>
                        </div>
                        <div class="modal-body">
                            <form action="" id="formUser">
                                {% for item in userform %}
                                    <div class="col-sm-6">
                                    <label for="">{{ item.label }}</label>
                                    {{ item }}
                                    <span style="color: red"></span>
                                    </div>
                                {% endfor %}
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-success" id="btnSaveUser">保存</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        var user_add_edit=undefined;
        $(function () {
            btnAdd();
            saveDepartment();
            //添加修改员工信息
            bindBtnSaveEvent();
            //编辑员工信息  获取信息
            editgetUser();
            //删除员工
            userinfo_del();
        })



        function btnAdd() {
            $("#btn-add").click(function () {
                $("#myModal").modal("show")
            })
            $('#btn-department').click(function (){
                 $('#departmentlist').toggle()
            })
            $('#btn-adduser').click(function(){
                $("#userinfo").modal("show")
            })
            $(document).on('click',function(e){
                 $btn_department = $('#btn-department')
                 $departmentlist  =$('#departmentlist')
                //如果点击其他地方，窗口隐藏
                 if(!$btn_department.is(e.target) && !$departmentlist.is(e.target) && $departmentlist.has(e.target).length===0){
                    $departmentlist.hide(500)
                 }
            });
            $('#btn-adduser').click(function(){
                user_add_edit=undefined;
                //document.getElementById('formUser').reset();
                $('#formUser').find('input').val('');
                $('#formUser').find('select').val('');
                $('#formUser').find('span').text('');
                $('#userinfo').modal('show')
            })
        }

        function saveDepartment() {
            $("#btnSave").click(function(){
                $.ajax({
                    url:"/admin/add/depart/",
                    type:"post",
                    data:$("#formDepart").serialize(),
                    dataType:"JSON",
                    success: function(res) {
                        if(res.status){
                            console.log("添加成功")
                            location.reload()
                        }else {
                            console.log("添加失败")
                            $.each(res.error,function (name,data){
                                $('#id_'+name).next().text(data[0])
                            })
                        }
                    }
                })
            })
        }
        function bindBtnSaveEvent(){
            $('#btnSaveUser').click(function(){
                if(user_add_edit){
                    editUser()
                }else{
                    addUser()
                }
            })
        }
        function  editgetUser(){
            $('.userinfoedit').click(function (){
                $('#formUser').find('span').html('');
                id=$(this).attr('uid')
                $.ajax({
                     url:'/admin/get/userinfo/',
                     type:'get',
                     data:{id:id},
                     success:function (res){
                         if(res.status) {
                             $.each(res.data, function (name, data) {
                                 $('#id_' + name).val(data)
                             })
                             $('#userinfo').modal('show')
                         }else{
                             alert(res.error)
                         }

                     }
                })
                 user_add_edit=id
            })

        }
        function addUser(){
                $.ajax({
                    url:"/admin/add/userinfo/",
                    type:"post",
                    data:$("#formUser").serialize(),
                    dataType:"JSON",
                    success: function (res) {
                        if(res.status){
                            console.log("添加成功")
                            location.reload()
                        }else {
                            console.log("添加失败")
                            $.each(res.error,function (name,data){
                                $('#id_'+name).next().text(data[0])
                                $("#id_"+name).addClass("error").attr("placeholder","字段不能为空")
                            })
                        }
                    }
                })
        }
        function  editUser(){
            var id=user_add_edit;
             $.ajax({
                    url:"/admin/update/userinfo/?id="+id,
                    type:"post",
                    data:$("#formUser").serialize(),
                    dataType:"JSON",
                    success: function (res) {
                        if(res.status){
                            console.log("修改成功")
                            location.reload()
                        }else {
                            console.log("修改失败")
                            $.each(res.error,function (name,data){
                                $('#id_'+name).next().text(data[0])
                                $("#id_"+name).addClass("error").attr("placeholder","字段不能为空")
                            })
                        }
                    }
                })
        }
        function  userinfo_del(){
            $('.userinfodel').click(function(){
                id=$(this).attr('uid')
                $.ajax({
                    url:'/admin/del/userinfo?id='+id,
                    type:'get',
                    success:function (res){
                        alert(res.status)
                        if(res.status){
                            console.log("删除成功")
                            location.reload()
                        }else {
                            alert(res.error)
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}