要求:
使用 Ajax 的方式提交数据: https://www.cnblogs.com/-wenli/p/10470063.html
使用模态框完成增加数据, 能完成增加, 删除与修改也就很简单了.
HTML 代码
关于在 django 中引用静态文件: https://www.cnblogs.com/-wenli/p/10470063.html
关于使用的 CSS 样式: https://v3.bootcss.com/css/
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- {%load staticfiles%}
- <link rel="stylesheet" href="{% static'/plugins/bootstrap-3.3.7-dist/css/bootstrap.css'%}">
- <link rel="stylesheet" href="{% static'/plugins/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css'%}">
- <script src="{% static'/js/jquery/jquery-3.3.1.js'%}">
- </script>
- <title>
- Title
- </title>
- </head>
- <body>
- <div class="container">
- <div>
- <a type="button" class="btn btn-primary" id="addBtn">
- 添加
- </a>
- </div>
- <div>
- <table border="1" class="table table-bordered">
- <thead>
- <tr>
- <th>
- ID
- </th>
- <th>
- 姓名
- </th>
- <th>
- 年龄
- </th>
- <th>
- 性别
- </th>
- <th>
- 班级
- </th>
- <th>
- 住址
- </th>
- <th>
- 行为
- </th>
- </tr>
- </thead>
- <tbody>
- {% for row in stu_list %}
- <tr>
- <td>
- {{ row.id }}
- </td>
- <td>
- {{ row.username }}
- </td>
- <td>
- {{ row.age }}
- </td>
- <td>
- {{ row.gender }}
- </td>
- <td>
- {{ row.cs.title }}
- </td>
- <td>
- {{ row.address }}
- </td>
- <td>
- <a type="button" class="btn btn-primary" href="/delstudent.html?nid={{ row.id }}">
- 删除
- </a>
- <span class="glyphicon glyphicon-remove" aria-hidden="true">
- </span>
- <a type="button" class="btn btn-primary" href="/altstudent.html?nid={{ row.id }}">
- 编辑
- </a>
- <span class="fa fa-edit" aria-hidden="true">
- </span>
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
- </div>
- <!--<!– Button trigger modal –>-->
- <!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
- data-target="#myModal">-->
- <!--Launch demo modal-->
- <!--</button>-->
- <!-- 默认通过 id 相同来关联使用 -->
- <!-- 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">
- <div class="form-group">
- <label for="exampleInputEmail1">
- 姓名:
- </label>
- <input type="text" class="form-control" id="exampleInputEmail1" name="username"
- placeholder="name">
- </div>
- <div class="form-group">
- <label for="exampleInput">
- 年龄:
- </label>
- <input type="text" class="form-control" id="exampleInput" name="age" placeholder="age">
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">
- 性别:
- </label>
- <label class="checkbox-inline">
- <input type="radio" name="gender" value="1">
- 男
- </label>
- <label class="checkbox-inline">
- <input type="radio" name="gender" value="0">
- 女
- </label>
- <div>
- <div class="form-group">
- <select class="form-control" name="class">
- {% for row in obj %}
- <option value="{{ row.id }}">
- {{ row.title }}
- </option>
- {% endfor %}
- </select>
- <div>
- <div class="form-group">
- <label for="exampleInputEmail1">
- 住址:
- </label>
- <input type="text" class="form-control" id="exampleInputaddress" placeholder="address"
- name="address">
- </div>
- </div>
- <div class="modal-footer">
- <span id="errMsg" style="color:red;">
- </span>
- <button type="button" class="btn btn-default" data-dismiss="modal">
- Close
- </button>
- <button type="button" class="btn btn-primary" id="btnSave">
- 确定
- </button>
- </div>
- </div>
- </div>
- </div>
- <script src="{% static'/plugins/bootstrap-3.3.7-dist/js/bootstrap.js'%}">
- </script>
- <script>
- < !--#调用函数--><!--页面加载完后执行的函数-->$(function() {
- bindEvent();
- bindSave();
- }); < !--#绑定函数-->
- function bindEvent() {
- $('#addBtn').click(function() {
- $('#addModal').modal('show'); < !--#通过js的方法调用模态对话框-->
- })
- }
- function bindSave() {
- $('#btnSave').click(function() {
- var postData = {}; < !--#在id为addModal的标签下找input与select标签-->$('#addModal').find('input,select').each(function() {
- console.log(this);
- var v = $(this).val();
- var n = $(this).attr('name');
- if (n == '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); < !--JSON.parse()将字符串转换为字典-->
- var dict = JSON.parse(arg);
- if (dict.status) {
- Windows.location.reload();
- } else {
- $('#errMsg').text(dict.message);
- }
- }
- })
- })
- }
- </script>
- </body>
- </HTML>
视图函数
from django.shortcuts import render,HttpResponse,redirect from app01 import models def get_student(request): stu_list = models.Student.objects.all() obj = models.Classes.objects.all() print(stu_list) print(obj) # return HttpResponse('ok') return render(request, "get_student.html", {'stu_list': stu_list,'obj':obj}) def add_student(request): response={'status':True,'message':None} try: name = request.POST.get('username') age = request.POST.get('age') gender = request.POST.get('gender') cs_id = request.POST.get('class') address = request.POST.get('address') print(name, age, gender, cs_id, address) models.Student.objects.create(username=name, age=age, gender=gender, cs_id=cs_id, address=address) except Exception as e: response['status']=False response['message']='用户输入错误' import JSON result=JSON.dumps(response,ensure_ascii=False) return HttpResponse(result) # ret=models.Classes.objects.all().values('title') # for Title in ret: # if Title['title']==title: # print(Title) # 注意这里是 url 路径 def del_student(request): nid = request.GET.get('nid') print(nid) ret = models.Student.objects.filter(id=nid).delete() print(ret) return redirect('/student.html/') def alt_student(request): if request.method=="GET": nid = request.GET.get('nid') obj=models.Student.objects.filter(id=nid)[0] cs_list = models.Classes.objects.all() return render(request,'alt_student.html',locals()) elif request.method=="POST": nid=request.GET.get("nid") name = request.POST.get('name') age = request.POST.get('age') gender = request.POST.get('gender') cs_id = request.POST.get('class') address = request.POST.get('address') print(name, age, gender, cs_id, address) # models.Student.objects.filter(id=nid).update(username=name,age=age,gender=gender,cs_id=cs_id,address=address) return redirect("/student.html/")
路由
from django.contrib import admin from django.urls import path from app01.views import * urlpatterns = [ path('altclasses.html/',alt_classes), path('student.html/', get_student), path('addstudent.html/',add_student), path('delstudent.html/',del_student), ]
具体实现测试
代码分析:
使用 Ajax 提交数据
url: 提交地址
type: 数据传输的方式, 支持所有 http 方法
data: 传输的数据为键值对格式
succes:function(arg){ // 执行代码 }
这个函数只有服务端返回的信息到达客户端才会执行, 这个很重要, 比如添加完数据, 在函数里自动刷新页面, 如果数据格式错误, 将服务端返回的信息, 在这里就行处理, 显示到页面上.
而 arg 为服务端返回的数据, 为字符串
这里就要补充一下在 python 下, 以及 JavaScript 下的序列化.
如果我们使用下面第一种方法, 需要自行进行反序列化, JSON.parse().
如果使用第二种方法: 只需要加上 dataType:'JSON',Ajax 自动帮我们完成反序列化.
绑定模态框
找到
id="addModal" 的 div: 为模态框
function bindEvent(){ $('#addBtn').click(function(){ $('#addModal').modal('show'); <!--# 通过 js 的方法调用模态对话框 --> }) }
var postData={ } 3.
$('#addModal').find('input,select').each(function( 4.
console.log(this); var v =$(this).val(); var n=$(this).attr('name'); 5.
if(n=='gender'){ if($(this).prop('checked')){ postData[n]=v; } } else{ postData[n]=v; } }); console.log(postData)
来源: http://www.bubuko.com/infodetail-2976284.html