django modal + bootstrap
阿新 • • 發佈：2018-03-02
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 modal + bootstrap