一. 基于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=" 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"> × </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"> × </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> ' + '<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做，但代码量大）
- 独立的页面
- 数据量大或条目多
b. 对话框方式：
- 数据量小或条目少
-增加，编辑
- Ajax: 考虑，当前页；td中自定义属性
- 页面（直接刷新，或用ajax做，但代码量大）