西游之路——python全栈——创建学生信息及删除

一、HTML前端操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {# 引入插件 #}
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
    <style>
        .icon{
            margin: 0px 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="padding:20px 0;">
        <a class="btn btn-primary" id="addBtn">添加</a>
        <a class="btn btn-danger">删除</a>
    </div>
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            {% for row in stu_list %}
            <tr nid="{{row.id}}">
                <td>{{row.id}}</td>
                <td>{{row.name}}</td>
                <td>{{row.age}}</td>
                <td>{{row.gender}}</td>
                <td>{{row.cs.name}}</td>
                <td>
                    <a href="#" class="glyphicon glyphicon-remove icon del-row"></a>
                    <a href="#" class="fa fa-pencil-square-o icon"></a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="addModal" 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">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">创建学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cls_id">
                                {# 不能用stu_list循环，要用cls_list循环，不然会出现重复 #}
                                {% for row in cls_list %}
                                <option value="{{row.id}}">{{row.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <span id="errorMsg" style="color: red;"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnSave">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="alert alert-danger" role="alert">
            <h3>删除学生信息？</h3>
            <div>
                <input type="text" id="delNid" style="display: none;">
            </div>
            <div>
                <button type="button" class="btn btn-default">取消</button>
                <button type="button" class="btn btn-warning" id="delConfirm">确定删除</button>
            </div>
        </div>
        </div>
    </div>
</div>

{# jquery必须放插件前 #}
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>

<script>
        $(function() {
            bindEvent();
            bindSave();
            bindDel();
            bindDelConfirm();
        });
        function bindDel() {
            $('#tb').on('click','.del-row',function() {
                $('#delModal').modal('show');
                //获取当前行的ID
                var rowId = $(this).parent().parent().attr('nid');
                //设置给delNid
                $('#delNid').val(rowId);
            });
        }
        function bindDelConfirm() {
            $('#delConfirm').click(function() {
                    var nid = $('#delNid').val();
                    $.ajax({
                        url: '/del_student.html',
                        type: 'GET',
                        data: {nid: nid},
                        success: function(arg) {
                            var dict = JSON.parse(arg);
                            if(dict.static) {
                                $('tr[nid="'+ nid +'"]').remove();
                                $('#delModal').modal('hide');
                            }
                        }
                    });
            });
        }
        function bindEvent() {
            $('#addBtn').click(function() {
                $('#addModal').modal('show');
            });
        }
        function bindSave() {
            $('#btnSave').click(function() {
　　　　　　　　　　// 获取表单所有信息，可优化，见最后
                var postData = {};
                $('#addModal').find('input,select').each(function () {
                    console.log($(this)[0]);
                    var v = $(this).val();
                    var n = $(this).attr('name');
                    if(name=='gender'){
                        if($(this).prop('checked')){
                            postData[n] = v;
                        }
                    }else{
                        postData[n] = v;
                    }
                });
                console.log(postData);
                $.ajax({
                    url: '/addStudent.html',
                    type: 'POST',
                    data: postData,
                    success: function(arg) {
                        console.log(arg);
                        //arg为字符串
                        //JSON.parse将字符串转行为字典
                        var dict = JSON.parse(arg);
                        //字典用点取值
                        if(dict.status) {
                             //window.location.reload();
                             //自增id = dict.data
                             createRow(postData, dict.data);
                             //关闭对话框
                             $('#addModal').modal('hide');
                        }else {
                            $('#errorMsg').text(dict.message);
                        }
                    }
                });
            });
        function createRow(postData, nid) {
            var tr = document.createElement('tr');
            $(tr).attr('nid',nid);

            var tdId = document.createElement('td');
            tdId.innerHTML = nid;
            $(tr).append(tdId);

            var tdUser = document.createElement('td');
            tdUser.innerHTML = postData.username;
            $(tr).append(tdUser);

            var tdAge = document.createElement('td');
            tdAge.innerHTML = postData.age;
            $(tr).append(tdAge);

            var tdAge = document.createElement('td');
            if(postData.gender == '1') {
                tdAge.innerHTML = 'True';
            }else{
                tdAge.innerHTML = 'False';
            }
            $(tr).append(tdAge);

            var tdClass = document.createElement('td');
            var text = $('select[name="cls_id"]').find('option[value="' + postData.cls_id + '"]').text();
            tdClass.innerHTML = text;
            $(tr).append(tdClass);

            //创建标签第二种方式，用字符串
            var tdHandle = '<a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon"></a>';
            $(tr).append(tdHandle);

            $('#tb').append(tr);
        }
        }
</script>
</body>
</html>

　二、py文件后台操作

from django.shortcuts import render,HttpResponse
from app01 import models
# Create your views here.

def students(request):
    stu_list = models.Students.objects.all()
    cls_list = models.Classes.objects.all()
    return render(request,"students.html",{"stu_list": stu_list, 'cls_list': cls_list})

import json
def addStudent(request):
    response = {'status': True, 'message': None, 'data': None}
    try:
        u = request.POST.get("username")
        a = request.POST.get("age")
        g = request.POST.get("gender")
        c = request.POST.get("cls_id")
        obj = models.Students.objects.create(
              name=u,
              age=a,
              gender=g,
              cs_id=c
              )
        response['data'] = obj.id
    except Exception as e:
        response['status'] = False
        response['message'] = '用户输入有误'
    result = json.dumps(response,ensure_ascii=False)
    return HttpResponse(result)

def del_student(request):
    response = {'static': True, 'message': None}
    try:
        nid = request.GET.get("nid")
        models.Students.objects.filter(id=nid).delete()
    except Exception as e:
        print(555555555,type(e))
        response['static'] = False
    result = json.dumps(response)
    return HttpResponse(result)

总结：

　　1、序列化

　　　　　　Python：

　　　　　　　　　　字符串 = json.dumps(对象)

　　　　　　　　　　对象 = json.loads(字符串)

　　　　　　JavaScript：

　　　　　　　　　　对象 = JSON.parse(字符串)

　　　　　　　　　　字符串 = JSON.stringify(对象)

　　　　应用场景：

　　　　　　　　数据传输时，发送和接收都以字符串形式进行

　　2.ajax

　　　　　　$.ajax({

　　　　　　　　url:

　　　　　　　　type:

　　　　　　　　data:

　　　　　　　　dataType: 'JSON', // 自动把arg转为对象

　　　　　　　　success: function(arg) {

　　　　　　　　　　// arg是对象

　　　　　　　　}

　　　　　　})

　　3、

　　　　HTML中获取数据（input和select标签） =》取出数据存入一个字典，可直接用于ajax的data使用

　　4、事件委托

　　　　　　$('要绑定标签的上级标签’).on('click', '要绑定的标签'，function() {} )

　　　　　　$('要绑定标签的上级标签’).delegate( '要绑定的标签'，'click',function() {} )

　　5、表单获取优化

/*获取表单所有信息方式
1、使用each循环
2、var data = $('#form表单的ID').serialize()   （优化推荐）
    data存为字典类型，可直接调用
*/

报错归纳：

　　argument list

　　自变量列表

　　Internal Server Error

　　内部服务器错误

存在的bug：添加学生后不能直接删除，要刷新才能做删除操作