标签：django bootstrap jquery ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7/css/bootstrap.css">
<style>
.mypadding {
padding: 15px 0px 0px;
}
</style>
</head>
<body>
<div class="container">
{# <div class="row"></div>#}
<div class="row mypadding">
<div class="col-lg-1">
<a class="btn btn-primary" id="addStudent">添加</a>
</div>
</div>
<div class="row mypadding">
<div class="col-lg-5">
<table class="table table-bordered mypad">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>性别</th>
</tr>
</thead>
{% for student in student_list %}
<tr>
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{% if student.gender %}
男
{% else %}
女
{% endif %}
</td>
<td>{{ student.cls.title }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" id="stuadd_modal">
<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><!-- end .modal-header -->
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="stu_name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="stu_name" name="stu_name"
placeholder="name">
</div>
</div><!-- group -->
<div class="form-group">
<label for="stu_age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="stu_age" name="stu_age" placeholder="age">
</div>
</div><!-- group -->
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio1" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio2" value="0"> 女
</label>
</div>
</div><!-- group -->
<div class="form-group">
<label for="class_name" class="col-sm-2 control-label">班级</label>
<div class="col-sm-3">
<select class="form-control" id="class_name" name="class_name">
{% for class in class_list %}
<option value="{{ class.id }}">{{ class.title }}</option>
{% endfor %}
</select>
</div>
</div><!-- group -->
</form><!-- end form -->
</div><!-- end .modal-body -->
<div class="modal-footer">
<div class="col-lg-6">
<span id="modal_error_msg" style="color: red"></span>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="stuadd_modal_submit">确定</button>
</div><!-- end .modal-footer-->
</div> <!--end .modal-content -->
</div> <!-- end .modal-dialog-->
</div> <!-- end .modal fade -->
<!-- script start -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
$(function () {
bindClickEvent();
});
function bindClickEvent() {
$(‘#addStudent‘).click(function () {
$(‘#myModal‘).modal(‘show‘);
});
$(‘#stuadd_modal_submit‘).click(function () {
var stu_data = {};
$(‘#stuadd_modal‘).find(‘input,select‘).each(function () {
{# console.log(this);#}
var stu_key = $(this).attr(‘name‘);
var stu_value = $(this).val();
{# console.log(stu_key);#}
{# console.log(stu_value);#}
if (stu_key == ‘gender‘) {
if (!$(this).prop(‘checked‘)) {
{#continue;#}
return true;
}
}
stu_data[stu_key] = stu_value;
});
{# //console.log(stu_data); //{stu_name: "aa", stu_age: "bb", gender: "1", class_name: "1"}#}
$.ajax({
url:‘/add_students/‘,
type:‘POST‘,
data:stu_data,
success:function (args) {
var respone_dict=JSON.parse(args);
if(respone_dict.status) {
{# console.log("success");#}
window.location.reload();
}else{
$(‘#modal_error_msg‘).text(respone_dict.msg);
}
}
})
});
}{#function end#}
</script>
</body>
</html>#!/usr/bin/env python3
# -*- coding:utf-8 -*-
# info:
import json
from django.shortcuts import render,get_list_or_404,redirect,HttpResponse
from app01.models import Classes,Students,Teachers
def get_students(request):
student_list=Students.objects.all()
class_list=Classes.objects.all()
return render(request,‘get_students.html‘,{"student_list":student_list,‘class_list‘:class_list})
def add_students(request):
response_dict={"status":True,"msg":None}
# {stu_name: "aa", stu_age: "bb", gender: "1", class_name: "1"} # }
try:
stu_name=request.POST.get(‘stu_name‘)
stu_age=request.POST.get(‘stu_age‘)
gender=request.POST.get(‘gender‘)
class_id=request.POST.get(‘class_name‘)
Students.objects.create(name=stu_name,age=stu_age,gender=gender,cls_id=class_id)
except Exception as e:
response_dict[‘status‘]=False
response_dict[‘msg‘]=str(e)
response_json=json.dumps(response_dict)
return HttpResponse(response_json)
def edit_students(request,student_id):
pass
标签：django bootstrap jquery ajax
原文地址：http://blog.51cto.com/13606158/2080138
