一、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：添加学生后不能直接删除，要刷新才能做删除操作