一. 基于BootStrap,FortAweSome，Ajax的学生管理系统代码部分

1.students.html

<1>html页面文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.css">

    <style>

        .icon {

            margin: 0 15px;

        }

    </style>

</head>

<body>

<div style="padding: 20px 0; text-align: center;color: #2aabd2" ><h3>学生管理</h3></div>

<div class="container" style="width: 800px">

    <div><button class="btn btn-info" id='bntAdd' style="margin-bottom: 20px;">添加学生</button></div>

    <div>

        <table class="table-bordered table-hover table table-striped">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>姓名</th>

                    <th>年龄</th>

                    <th>性别</th>

                    <th>班级</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody id="student_tb">

                {% for row in student_list %}

                <tr nid="{{ row.id }}">

                    <td na="nid">{{ row.id }}</td>

                    <td na="StudentName">{{ row.StudentName }}</td>

                    <td na="age">{{ row.age }}</td>

                    {% if row.gender%}

                        <td na="gender">男</td>

                    {% else %}

                        <td na="gender">女</td>

                    {% endif %}

                    <td na="class_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>

                    <td>

                        <a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px" ></a>

                        <a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>

                    </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>

</div>

<div class="modal fade" id="addModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;  </button>

            <h4 class="modal-title" id="myModalLabel">添加学生信息 </h4>

         </div>

         <div class="modal-body">

            <form class="form-horizontal" role="form">

               <div class="form-group">

                  <label for="studentname" class="col-sm-2 control-label">姓名</label>

                  <div class="col-sm-10">

                     <input type="text" class="form-control" name="StudentName" placeholder="StudentName">

                  </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="age">

                  </div>

               </div>

               <div class="form-group">

                  <label for="gender" class="col-sm-2 control-label">性别</label>

                  <div class="col-sm-10">

                     <label class="radio-inline">

                        <input type="radio" name="gender"  value="1" checked >男

                     </label>

                    <label class="radio-inline">

                        <input type="radio" name="gender"  value="0">女

                    </label>

                  </div>

               </div>

               <div class="form-group">

                  <label for="class" class="col-sm-2 control-label">班级</label>

                  <div class="col-sm-10">

                     <select  class="form-control" name="class_id">

                         {% for item in class_list %}

                              <option value={{ item.id }}>{{ item.title }}</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" id="btnSave" class="btn btn-primary">保存</button>

         </div>

      </div>

   </div>

</div>

<div class="modal fade" id="delModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog">

       <div class="alert alert-warning">

           <div><input style="display: none" type="text" id="delNid" /></div>

           <h3 style="text-align: center">是否删除学生信息？</h3>

           <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>

                <button type="button" id="btnConfirm" class="btn btn-danger">确定</button>

           </div>

       </div>

   </div>

</div>

<div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;  </button>

            <h4 class="modal-title" id="myModalLabel">修改学生信息 </h4>

         </div>

         <div><input style="display: none" type="text" id="editNid" name="nid" /></div>

         <div class="modal-body">

            <form class="form-horizontal" role="form">

               <div class="form-group">

                  <label for="studentname" class="col-sm-2 control-label">姓名</label>

                  <div class="col-sm-10">

                     <input type="text" class="form-control" name="StudentName" placeholder="StudentName">

                  </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="age" >

                  </div>

               </div>

               <div class="form-group">

                  <label for="gender" class="col-sm-2 control-label">性别</label>

                  <div class="col-sm-10">

                     <label class="radio-inline">

                        <input type="radio" name="gender"  value="1" checked >男

                     </label>

                    <label class="radio-inline">

                        <input type="radio" name="gender"  value="0">女

                    </label>

                  </div>

               </div>

               <div class="form-group">

                  <label for="class" class="col-sm-2 control-label">班级</label>

                  <div class="col-sm-10">

                     <select  class="form-control" name="class_id">

                         {% for item in class_list %}

                              <option value={{ item.id }}>{{ item.title }}</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" id="saveEdit" class="btn btn-primary">保存</button>

         </div>

      </div>

   </div>

</div>

<script src="/static/jquery-3.1.1.js"></script>

<script src="/static/plugin/bootstrap/js/bootstrap.js"></script>

<script>

    $(function () {

        bindEdit();

        saveEdit();

        bindDel();

        confirm_del();

        bindEvent();

        bindSave();

        createRow();

    });//加载完后自动执行上述函数,没有此步，jquery找到的标签绑定的事件和函数将失效

    function bindEdit() {

       $('#student_tb').on('click','.editRow',function () {

           $('#editModel').modal('show');

           $(this).parent().prevAll().each(function () {

              var value=$(this).text();

              var na=$(this).attr('na');

              if(na=='class_id') {

                  var cid=$(this).attr('cid');

                  $('#editModel select[name=class_id]').val(cid);}

              else if(na=='gender') {

                  if(value=='男') {$('#editModel :radio[value="1"] ').prop('checked',true);}

                  else {$('#editModel :radio[value="0"] ').prop('checked',true);}

                  }

              //else if(na=='age') {$('#editModel input[name="age"]').val(value) ;}

              //else if(na=='StudentName') {$('#editModel input[name="StudentName"]').val(value) ;}

              //else{$('#editModel input[name="nid"]').val(value)}

               else {$("#editModel input[name='"+ na+"']").val(value)}

              console.log(na,value)

             })

       });

    }

    function saveEdit() {

        $('#saveEdit').click(function () {

            var postData={};

            $('#editModel').find('input,select').each(function () {

                var name=$(this).attr('name');

                var value=$(this).val();

                if (name=='gender'){

                    if($(this).prop('checked')) {postData[name]=value}

                }

                else {postData[name]=value}

                console.log(postData)

            });

            $.ajax({

                url:'/edit_students',

                type:'POST',

                data:postData,

                dataType:'JSON',//返回值要是JSON格式的

                success:function (arg) {

                    console.log(arg);

                    if (arg.status){window.location.reload();}

                    else{alert(arg.message)}

                }

            })

        })

    }

    function bindDel() {

            //遇到a标签绑定事件失败的测试，绑定的标签添加onclick="bindDel(this)"

            //{#console.log(ths);

            //{#$('#delModel').modal('show');

        $('#student_tb').on('click','.deleteRow',function () {

            $('#delModel').modal('show');

            var rowId=$(this).parent().parent().attr('nid');

            $('#delNid').val(rowId);//为选定标签设置值

            });

         }

    function confirm_del() {

        $('#btnConfirm').click(function () {

            var delID= $('#delNid').val();

            console.log(delID);

            $.ajax({

                url:'/del_students',

                type:'GET',

                data: {'nid': delID},//ajax传过去的必须是字典

                success:function (arg) {

                   var dict=JSON.parse(arg);

                    if (dict.status){ $('tr[nid="'+ delID+'"]').remove();}

                    $('#delModel').modal('hide')}

                })

        })

    }

    function bindEvent() {

        $('#bntAdd').click(function () {$('#addModal_1').modal('show')//手动打开模态框

         });

    }

    function bindSave() {

        $('#btnSave').click(function () {

            var postData = {};

            $('#addModal_1').find('input,select').each(function () {

                console.log(this);//方便调试使用

                var value = $(this).val();

                var name = $(this).attr('name');

                if (name=='gender') {

                    if ($(this).prop('checked')) {

                        postData[name] = value;

                    }

                }

                else {postData[name] = value;}

            });

            console.log(postData);

            $.ajax({

                url: '/add_students',

                type: 'POST',

                data: postData,

                success: function (arg) {

                    var dict = JSON.parse(arg);

                    console.log(arg);

                    if(dict.status){

                        {#window.location.reload();#}

                        createRow(postData,dict.data);

                        $('#addModal_1').modal('hide')

                        }else {$('#errorMsg').text(dict.message);}

                    }

            })

        });

    }

    function createRow(postData,nid) {

        var tr = document.createElement('tr');

        $(tr).attr('nid',nid);

        var trId = document.createElement('td');

        trId.innerHTML = nid;

        $(tr).append(trId);

        var trStudentName = document.createElement('td');

        trStudentName.innerHTML = postData.StudentName;

        $(tr).append(trStudentName);

        var trAge = document.createElement('td');

        trAge.innerHTML = postData.age;

        $(tr).append(trAge);

        var trGender = document.createElement('td');

        if (postData.gender == '0') {

            trGender.innerHTML = '女';

        }

        else {

            trGender.innerHTML = '男';

        }

        $(tr).append(trGender);

        var trClass = document.createElement('td');

        text = $('select[name="class_id"]').find('option[value="' + postData.class_id + '"]').text();

        trClass.innerHTML = text;

        $(tr).append(trClass);

        $('#student_tb').append(tr);

        var troperation = document.createElement('td');

        troperation.innerHTML = '<a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px"></a>\n' +

            '<a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>';

        $(tr).append(troperation);

    }

</script>

</body>

</html>

<2>学生管理页面

<3>添加学生模态框

2.students_ajax.py

# -*- coding:utf-8 -*-

from django.shortcuts import render,HttpResponse

from django.shortcuts import redirect

from student_manage.models import *

import json

def get_students(request):

    class_list=classes.objects.all()

    student_list = student.objects.all()

    return render(request, 'students.html', {'student_list':student_list, 'class_list': class_list})

def add_students(request):

    response = {'status': True, 'message': None,'data':None}

    print(request.POST)

    try:

        Name = request.POST.get('StudentName')

        age = request.POST.get('age')

        gender = request.POST.get('gender')

        class_id = request.POST.get('class_id')

        print(Name, age, gender, class_id)

        obj=student.objects.create(StudentName=Name, age=age, gender=gender, cs_id=class_id)

        response['data']=obj.id

    except Exception as e:

        response['status']=False

        response['message']='用户输入错误'

    result = json.dumps(response, ensure_ascii=False)

    print(result)

    return HttpResponse(result)

def del_students(request):

    response = {'status': True}

    print(request.GET)

    try:

        nid=request.GET.get('nid')

        print(nid)

        student.objects.filter(id=nid).delete()

    except Exception  as e:

        response['status']=False

    print(response)

    #ajax参数arg只能接受字符串，故传到前段arg的参数要先转化为字符串

    return HttpResponse(json.dumps(response))

def edit_students(request):

    response = {'status': True, 'message': None}

    try:

        nid=request.POST.get('nid')

        Name = request.POST.get('StudentName')

        age = request.POST.get('age')

        gender = request.POST.get('gender')

        class_id = request.POST.get('class_id')

        print(nid,Name, age, gender, class_id)

        student.objects.filter(id=nid).update(StudentName=Name,age=age,gender=gender,cs_id=class_id)

    except Exception as e:

        response['status']=False

        response['message']='用户输入错误'

    result = json.dumps(response, ensure_ascii=False)

    return HttpResponse(result)

3.summerize

<1>序列化
    Python序列化
        字符串 = json.dumps(对象)    对象->字符串
        对象 = json.loads(字符串)    字符串->对象
       
    JavaScript:
        字符串 = JSON.stringify(对象) 对象->字符串
        对象 = JSON.parse(字符串)     字符串->对象
       
    应用场景：
        数据传输时，
            发送：字符串
            接收：字符串 -> 对象

<2>ajax基础知识

$.ajax({

        url: 'http//www.baidu.com',

        type: 'GET',

        data: {'k1':'v1'},

        success:function(arg){

            // arg是字符串类型

            // var obj = JSON.parse(arg)

        }

    })

$.ajax({

        url: 'http//www.baidu.com',

        type: 'GET',

        data: {'k1':'v1'},

        dataType: 'JSON',

        success:function(arg){

            // arg是对象

        }

    })

<3>发送数据时data中的value

a. 只是字符串或数字

            $.ajax({

                url: 'http//www.baidu.com',

                type: 'GET',

                data: {'k1':'v1'},

                dataType: 'JSON',

                success:function(arg){

                    // arg是对象

                }

            })

b. 包含数组

            $.ajax({

                url: 'http//www.baidu.com',

                type: 'GET',

                data: {'k1':[1,2,3,4]},

                dataType: 'JSON',

                traditional: true,

                success:function(arg){

                    // arg是对象

                }

            })

c. data内仍含有字典

　　　　$.ajax({

                url: 'http//www.baidu.com',

                type: 'GET',

                data: {'k1': JSON.stringify({}) },

                dataType: 'JSON',

                success:function(arg){

                    // arg是对象

                }

            })

<4>事件委托

　$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
    $('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
<5>打开新页面的两种方式
 a.新URL方式：
        - 独立的页面
        - 数据量大或条目多         
 b. 对话框方式：
        - 数据量小或条目少
        -增加，编辑
        - Ajax: 考虑，当前页；td中自定义属性
        - 页面（直接刷新，或用ajax做，但代码量大）
               
    

最新文章

  1. BZOJ 1565: [NOI2009]植物大战僵尸
  2. CF732D. Exams[二分答案 贪心]
  3. 跳过 centos部署 webpy的各种坑
  4. Windows 自动关机/定时关机 命令 shuntdown
  5. md5加密过程
  6. codeforces 546B
  7. 简单的Mvp设计
  8. PHP合并两张图片（水印）
  9. IntelliJ IDEA 2016.2.x 激活
  10. [BZOJ]1019 汉诺塔(SHOI2008)
  11. netty源码解解析(4.0)-14 Channel NIO实现:读取数据
  12. Python自学:第二章 动手试一试
  13. Paper Reviews and Presentations
  14. java中四种访问修饰符
  15. 定时任务 Wpf.Quartz.Demo.2
  16. Quartz TriggerListener 触发器监听器
  17. 使用路径arc-奥运五环
  18. 华为S5300系列升级固件S5300SI-V100R003C00SPC301.cc
  19. php简易配置函数
  20. SCP命令只能单项拷贝，另一个方向“RSA host key for 172.16.103.176 has changed and you have requested strict checki Host key verification failed. lost connection”问题

热门文章

  1. netsh wlan set hostednetwork 之后如何删除掉 配置 及终端无法获取IP的解决方法
  2. Navicat Premium (patch and keygen)
  3. poj 1523 求割点把一个图分成几个联通部分
  4. asp.net--ado.net5大对象代码示例
  5. cocos2d-android学习四 ---- 精灵的创建
  6. Nginx 源码安装和调优
  7. TextView高级
  8. hdoj--5093--Battle ships（二分图经典建图）
  9. 在Spring Boot中使用Spring-data-jpa实现分页查询
  10. java.sql.SQLException: Field &#39;id&#39; doesn&#39;t have a default value解决方案