具于django ajax实现增 删 改 查功能

代码示例：

代码：

urls.py

  1. from django.conf.urls import url
  2. from django.contrib import admin
  3. from app01 import views
  4. urlpatterns = [
  5.     url(r'^admin/', admin.site.urls),
  6.     url(r'^students/', views.students),
  7.     url(r'^add_student/', views.add_student),
  8.     url(r'^del_student/', views.del_student),
  9.     url(r'^edit_student/', views.edit_student),
  10.     url(r'^test_ajax_list/', views.test_ajax_list),
  11. ]

settings.py

  1. STATIC_URL = '/static/'
  2. STATICFILES_DIRS = (
  3.     os.path.join(BASE_DIR,'static'),
  4. )

models.py

  1. from django.db import models
  2. from django.db import models
  3.  
  4. class Classes(models.Model):
  5.     """
  6.     班级表,男
  7.     """
  8.     title = models.CharField(max_length=32)
  9.     m = models.ManyToManyField("Teachers")
  10.  
  11. class Teachers(models.Model):
  12.     """
  13.     老师表，女
  14.     """
  15.     name = models.CharField (max_length=32)
  16.  
  17. class Student(models.Model):
  18.     username = models.CharField(max_length=32)
  19.     age = models.IntegerField()
  20.     gender = models.BooleanField()
  21.     cs = models.ForeignKey(Classes)

添加功能：

编辑功能：

views.py

  1. from django.shortcuts import render
  2. from django.shortcuts import HttpResponse
  3. from app01 import models
  4. import json
  5. def students(request):
  6.     cls_list = models.Classes.objects.all()
  7.     stu_list = models.Student.objects.all()
  8.  
  9.     return render(request,'students.html',{'stu_list':stu_list,'cls_list':cls_list})
  10.  
  11. def add_student(request):
  12.     response = {'status':True,'message': None,'data':None}
  13.     try:
  14.         u = request.POST.get('username')
  15.         a = request.POST.get('age')
  16.         g = request.POST.get('gender')
  17.         c = request.POST.get('cls_id')
  18.         obj = models.Student.objects.create(
  19.             username=u,
  20.             age=a,
  21.             gender=g,
  22.             cs_id=c
  23.         )
  24.         response['data'] = obj.id
  25.     except Exception as e:
  26.         response['status'] = False
  27.         response['message'] = '用户输入错误'
  28.  
  29.     result = json.dumps(response,ensure_ascii=False)
  30.     return HttpResponse(result)
  31.  
  32. def del_student(request):
  33.     ret = {'status': True}
  34.     try:
  35.         nid = request.GET.get('nid')
  36.         models.Student.objects.filter(id=nid).delete()
  37.     except Exception as e:
  38.         ret['status'] = False
  39.     return HttpResponse(json.dumps(ret))
  40.  
  41. def edit_student(request):
  42.     response = {'code':1000, 'message': None}
  43.     try:
  44.         nid = request.POST.get('nid')
  45.         user = request.POST.get('user')
  46.         age = request.POST.get('age')
  47.         gender = request.POST.get('gender')
  48.         cls_id = request.POST.get('cls_id')
  49.         models.Student.objects.filter(id=nid).update(
  50.             username=user,
  51.             age=age,
  52.             gender=gender,
  53.             cs_id=cls_id
  54.         )
  55.     except Exception as e:
  56.         response['code'] = 1001
  57.         response['message'] = str(e)
  58.     return HttpResponse(json.dumps(response))
  59.  
  60. def test_ajax_list(request):
  61.     print(request.POST.getlist('k'))
  62.     return HttpResponse('...')

students.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
  7.     <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
  8.     <style>
  9.         .icon {
  10.             margin: 0 5px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.  
  16. <div class="container">
  17.     <div style="padding: 20px 0;">
  18.         <a class="btn btn-primary" id="addBtn">添加</a>
  19.         <a class="btn btn-danger">删除</a>
  20.     </div>
  21.  
  22.     <div>
  23.         <table class="table table-bordered table-striped">
  24.             <thead>
  25.             <tr>
  26.                 <th>ID</th>
  27.                 <th>姓名</th>
  28.                 <th>年龄</th>
  29.                 <th>性别</th>
  30.                 <th>班级</th>
  31.                 <th>操作</th>
  32.             </tr>
  33.             </thead>
  34.             <tbody id="tb">
  35.             {% for row in stu_list %}
  36.                 <tr nid="{{  row.id }}">
  37.                     <td na="nid">{{ row.id }}</td>
  38.                     <td na="user">{{ row.username }}</td>
  39.                     <td na="age">{{ row.age }}</td>
  40.                     <td na="gender">{{ row.gender }}</td>
  41.                     <td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
  42.                     <td>
  43.                         <a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a>
  44.                     </td>
  45.                 </tr>
  46.             {% endfor %}
  47.             </tbody>
  48.  
  49.         </table>
  50.     </div>
  51. </div>
  52.  
  53. <!-- Modal -->
  54. <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  55.     <div class="modal-dialog" role="document">
  56.         <div class="modal-content">
  57.             <div class="modal-header">
  58.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  59.                         aria-hidden="true">×</span></button>
  60.                 <h4 class="modal-title" id="myModalLabel">创建学生</h4>
  61.             </div>
  62.             <div class="modal-body">
  63.  
  64.                 <form id="fm" class="form-horizontal">
  65.                     <div class="form-group">
  66.                         <label for="username" class="col-sm-2 control-label">姓名</label>
  67.                         <div class="col-sm-10">
  68.                             <input type="text" class="form-control" name="username" placeholder="姓名">
  69.                         </div>
  70.                     </div>
  71.  
  72.                     <div class="form-group">
  73.                         <label for="age" class="col-sm-2 control-label">年龄</label>
  74.                         <div class="col-sm-10">
  75.                             <input type="text" class="form-control" name="age" placeholder="年龄">
  76.                         </div>
  77.                     </div>
  78.  
  79.                     <div class="form-group">
  80.                         <label for="age" class="col-sm-2 control-label">性别</label>
  81.                         <div class="col-sm-10">
  82.                             <label class="radio-inline">
  83.                                 <input type="radio" name="gender" value="1"> 男
  84.                             </label>
  85.                             <label class="radio-inline">
  86.                                 <input type="radio"  name="gender" value="0"> 女
  87.                             </label>
  88.                         </div>
  89.                     </div>
  90.  
  91.                     <div class="form-group">
  92.                         <label for="age" class="col-sm-2 control-label">班级</label>
  93.                         <div class="col-sm-10">
  94.                             <select class="form-control" name="cls_id">
  95.                                 {% for row in cls_list %}
  96.                                     <option value="{{ row.id }}">{{ row.title }}</option>
  97.                                 {% endfor %}
  98.                             </select>
  99.  
  100.                         </div>
  101.                     </div>
  102.                 </form>
  103.             </div>
  104.             <div class="modal-footer">
  105.                 <span id="errorMsg" style="color: red;"></span>
  106.                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  107.                 <button type="button" class="btn btn-primary" id="btnSave">保存</button>
  108.             </div>
  109.         </div>
  110.     </div>
  111. </div>
  112.  
  113. <!-- Modal -->
  114. <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  115.     <div class="modal-dialog" role="document">
  116.         <div class="alert alert-danger" role="alert">
  117.             <h3>删除学生信息？</h3>
  118.             <div>...<input style="display: none;" type="text" id="delNid" /></div>
  119.             <div>
  120.                 <button type="button" class="btn btn-default">取消</button>
  121.                 <button id="delConfirm" type="button" class="btn btn-danger">确定</button>
  122.             </div>
  123.         </div>
  124.     </div>
  125. </div>
  126.  
  127. <!-- Modal -->
  128. <div class="modal fade" id="eidtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  129.     <div class="modal-dialog" role="document">
  130.         <div class="modal-content">
  131.             <div class="modal-header">
  132.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  133.                         aria-hidden="true">×</span></button>
  134.                 <h4 class="modal-title" id="myModalLabel">编辑学生</h4>
  135.             </div>
  136.             <div class="modal-body">
  137.  
  138.                 <form id="fm" class="form-horizontal">
  139.                     <input type="text" name="nid" style="display: none" />
  140.  
  141.                     <div class="form-group">
  142.                         <label for="username" class="col-sm-2 control-label">姓名</label>
  143.                         <div class="col-sm-10">
  144.                             <input type="text" class="form-control" name="user" placeholder="姓名">
  145.                         </div>
  146.                     </div>
  147.  
  148.                     <div class="form-group">
  149.                         <label for="age" class="col-sm-2 control-label">年龄</label>
  150.                         <div class="col-sm-10">
  151.                             <input type="text" class="form-control" name="age" placeholder="年龄">
  152.                         </div>
  153.                     </div>
  154.  
  155.                     <div class="form-group">
  156.                         <label for="age" class="col-sm-2 control-label">性别</label>
  157.                         <div class="col-sm-10">
  158.                             <label class="radio-inline">
  159.                                 <input type="radio" name="gender" value="1"> 男
  160.                             </label>
  161.                             <label class="radio-inline">
  162.                                 <input type="radio"  name="gender" value="0"> 女
  163.                             </label>
  164.                         </div>
  165.                     </div>
  166.  
  167.                     <div class="form-group">
  168.                         <label for="age" class="col-sm-2 control-label">班级</label>
  169.                         <div class="col-sm-10">
  170.                             <select class="form-control" name="cls_id">
  171.                                 {% for row in cls_list %}
  172.                                     <option value="{{ row.id }}">{{ row.title }}</option>
  173.                                 {% endfor %}
  174.                             </select>
  175.  
  176.                         </div>
  177.                     </div>
  178.                 </form>
  179.             </div>
  180.             <div class="modal-footer">
  181.                 <span id="errorMsg" style="color: red;"></span>
  182.                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  183.                 <button type="button" class="btn btn-primary" id="btnEditSave">保存</button>
  184.             </div>
  185.         </div>
  186.     </div>
  187. </div>
  188.  
  189. <script src="/static/js/jquery-3.1.1.js"></script>
  190. <script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
  191. <script>
  192.     $(function () {
  193.         bindEvent();
  194.         bindSave();
  195.         bindDel();
  196.         bindDelConfirm();
  197.         bindEdit();
  198.         bindEditConfirm();
  199.     });
  200.  
  201.     /*
  202.     编辑提交事件
  203.     */
  204.     function bindEditConfirm() {
  205.         $('#btnEditSave').click(function () {
  206.             var postData = {};
  207.             $('#eidtModal').find('input,select').each(function () {
  208.                 var v = $(this).val();
  209.                 var n = $(this).attr('name');
  210.                 if(n=='gender'){
  211.                     if($(this).prop('checked')){
  212.                         postData[n] = v;
  213.                     }
  214.                 }else{
  215.                     postData[n] = v;
  216.                 }
  217.             });
  218.  
  219.             $.ajax({
  220.                 url: '/edit_student/',
  221.                 type: 'POST',
  222.                 data: postData,
  223.                 dataType: 'JSON',
  224.                 success:function (arg) {
  225.                     if(arg.code == 1000){
  226.                         window.location.reload();
  227.                     }else{
  228.                         alert(arg.message);
  229.                     }
  230.                 }
  231.             })
  232.         })
  233.     }
  234.  
  235.     /*
  236.    绑定编辑按钮点击事件
  237.      */
  238.     function bindEdit() {
  239.         $('#tb').on('click','.edit-row',function () {
  240.             $('#eidtModal').modal('show');
  241.             //1.获取当前行的所有数据
  242.             // 将数据赋值到对应的对话框的指定位置
  243.  
  244.              $(this).parent().prevAll().each(function () {
  245.                  // cls_id
  246.                  var v = $(this).text();
  247.                  var n = $(this).attr('na');
  248.                 if(n=='cls_id'){
  249.                     var cid = $(this).attr('cid');
  250.                     $('#eidtModal select[name="cls_id"]').val(cid);
  251.                 }else if(n=='gender'){
  252.                     // v=True
  253.                     if(v=='True'){
  254.                         $('#eidtModal :radio[value="1"]').prop('checked',true);
  255.                     }else{
  256.                         $('#eidtModal :radio[value="0"]').prop('checked',true);
  257.                     }
  258.                 }else {
  259.                     // n=age
  260.                     // v=12
  261.                     $("#eidtModal input[name='"+ n +"']").val(v)
  262.  
  263.                 }
  264.              });
  265.  
  266.         })
  267.     }
  268.     function bindDelConfirm() {
  269.         $('#delConfirm').click(function () {
  270.             var rowId = $('#delNid').val();
  271.             console.log(rowId);
  272.  
  273.             $.ajax({
  274.                 url: '/del_student/',
  275.                 type: 'GET',
  276.                 data: {'nid': rowId},
  277.                 success:function (arg) {
  278.                     var dict = JSON.parse(arg);
  279.                     if(dict.status){
  280.                         $('tr[nid="'+ rowId+'"]').remove();
  281.                     }
  282.                     $('#delModal').modal('hide');
  283.                 }
  284.             })
  285.  
  286.         });
  287.  
  288.     }
  289.     function bindDel() {
  290.         $('#tb').on('click','.del-row',function () {
  291.             $('#delModal').modal('show');
  292.             // 回去当前行的ID
  293.             var rowId = $(this).parent().parent().attr('nid');
  294.             $('#delNid').val(rowId);
  295.         })
  296.     }
  297.     function bindEvent() {
  298.         $('#addBtn').click(function () {
  299.             $('#addModal').modal('show');
  300.         })
  301.     }
  302.     function bindSave() {
  303.  
  304.         $('#btnSave').click(function () {
  305.             var postData = {};
  306.             $('#addModal').find('input,select').each(function () {
  307.                 var v = $(this).val();
  308.                 var n = $(this).attr('name');
  309.                 if(n=='gender'){
  310.                     if($(this).prop('checked')){
  311.                         postData[n] = v;
  312.                     }
  313.                 }else{
  314.                     postData[n] = v;
  315.                 }
  316.             });
  317.  
  318.             /*
  319.             postData = {
  320.                  username: 'asdf',
  321.                  age:18,
  322.                  gender: 1,
  323.                  cls_id: 2
  324.             }
  325.              */
  326.  
  327.             $.ajax({
  328.                 url: '/add_student/',
  329.                 type: 'POST',
  330.                 data: postData,
  331.                 success:function (arg) {
  332.                     // arg是字符串
  333.                     // JSON.parse将字符串转换成字典， json.loads
  334.                     var dict = JSON.parse(arg);
  335.                     if(dict.status){
  336.                         /*
  337.                         postData = {
  338.                              username: 'asdf',
  339.                              age:18,
  340.                              gender: 1,
  341.                              cls_id: 2
  342.                         }
  343.                         自增id  = dict.data
  344.                          */
  345.                         createRow(postData,dict.data);
  346.                         $('#addModal').modal('hide');
  347.                         // window.location.reload();
  348.                     }else {
  349.                         $('#errorMsg').text(dict.message);
  350.                     }
  351.                 }
  352.             })
  353.  
  354.         });
  355.  
  356.     }
  357.     function createRow(postData,nid) {
  358.         var tr = document.createElement('tr');
  359.         $(tr).attr('nid',nid);
  360.  
  361.         var tdId = document.createElement('td');
  362.         tdId.innerHTML = nid;
  363.         $(tr).append(tdId);
  364.  
  365.         var tdUser = document.createElement('td');
  366.         tdUser.innerHTML = postData.username;
  367.         $(tr).append(tdUser);
  368.  
  369.         var tdAge = document.createElement('td');
  370.         tdAge.innerHTML = postData.age;
  371.         $(tr).append(tdAge);
  372.  
  373.         var tdGender = document.createElement('td');
  374.         if(postData.gender == "0"){
  375.             tdGender.innerHTML = 'False';
  376.         }else{
  377.              tdGender.innerHTML = 'True';
  378.         }
  379.         $(tr).append(tdGender);
  380.  
  381.         var tdClass = document.createElement('td');
  382.         var text = $('select[name="cls_id"]').find('option[value="'+ postData.cls_id +'"]').text();
  383.         tdClass.innerHTML = text;
  384.         $(tr).append(tdClass);
  385.  
  386.         var tdHandle = '<td> <a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a> </td>';
  387.         $(tr).append(tdHandle);
  388.  
  389.         $('#tb').append(tr);
  390.     }
  391. </script>
  392. </body>
  393. </html>

　　

django ajax增 删 改 查的更多相关文章

  1. 好用的SQL TVP~~独家赠送[增-删-改-查]的例子

    以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化.  本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...

  2. iOS FMDB的使用(增,删,改,查,sqlite存取图片)

    iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...

  3. iOS sqlite3 的基本使用(增 删 改 查)

    iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...

  4. ADO.NET 增 删 改 查

    ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...

  5. MVC EF 增 删 改 查

    using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...

  6. python基础中的四大天王-增-删-改-查

    列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...

  7. django单表操作 增 删 改 查

    一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取出数据. 目的:通过classes(班 ...

  8. Django（十）模型：django模型类对数据库的：增/删/改/查、自关联、管理器、元选项（指定表名）

    一.插入.更新和删除 调用一个模型类对象的save方法的时候就可以实现对模型类对应数据表的插入和更新. 调用一个模型类对象的delete方法的时候就可以实现对模型类对应数据表数据的删除. 二.自关联 ...

  9. django 多对多 增 删 改 查

      一.通过url方式实现多对多的:增加,删除,编辑 代码目录: urls.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

随机推荐

  1. js过滤检测敏感词汇

    html: <textarea rows="10" cols="100" id="myDiv"></textarea> ...

  2. LoadRunner中InvokeMethod failure: 外部组件发生异常解决办法

    -82801 abnormal termination,caused by mdrv process termination -29996 error:process mmdrv.exe was no ...

  3. VuGen：一般选项General Option

  4. 使用自己的域名解析 cnblogs 博客

    使用自己的域名解析 cnblogs 博客(博客园) 1.实现原理 用户访问 -> 阿里云解析 -> github page 跳转 -> 真实的博客地址 2.创建 github pag ...

  5. 【C#】日期格式转换

    C#里内置的DateTime基本上都可以实现这些功能,巧用DateTime会使你处理这些事来变轻松多了今天DateTime.Now.Date.ToShortDateString();昨天,就是今天的日 ...

  6. POJ 2019 Cornfields [二维RMQ]

    题目传送门 Cornfields Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7963   Accepted: 3822 ...

  7. java _循环练习和数组练习

    练习 1.输出所有的水仙花数,所谓水仙花数是指一个数3位数,其每位数字立方和等于其本身,如153 = 1*1*1 + 3*3*3 + 5*5*5(很经典的题目) 分析: 通过观察发现,本题目要实现打印 ...

  8. Web应用安全审计工具WATOBO

    Web应用安全审计工具WATOBO   WATOBO是一款Web应用程序安全测试工具.该工具使用代理方式,对Web会话数据进行审计.它是一款半自动化工具,可以自动对请求和响应进行分析,找出潜在漏洞信息 ...

  9. Openstack关于Regions和Availability Zones

    在AWS中有Region和Availability Zones的概念,并且在openstack中也实现了两者,只是不太容易看出来. 此文主要介绍他们的概念和关系,以及在openstack中的实现. 如 ...

  10. 【BZOJ 2306】 2306: [Ctsc2011]幸福路径 （倍增floyd）

    2306: [Ctsc2011]幸福路径 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 912  Solved: 437 Description 有向 ...