Django学习日记-05Ajax一对多添加 编辑操作

Ajax一对多添加操作

　　-在html添加对应的链接id

         <a id="showmodal">添加对话框</a>

　　-在头部head添加hide shadow modol样式

    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            left: 0;
            right:0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 99;
        }
        .modal{
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            margin-top: -200px;
            margin-left: -200px;
            z-index: 100;
        }ra
    </style>

  　　　-建立modal shadow 的div ，在modal的div中写出模板，用返回的request里面的字符串选择出客户需要看到的数据，select样式要到循环for

 <div id="shadow" class="shadow hide"></div>  //class类引用样式
    <div id="modal"  class="modal hide">
        <p>学生姓名：<input type="text" id="name" placeholder="姓名"></p>
        <p>学生班级：
            <select id="classID" name="classID">  //选择中插入ID
                {% for i in class_list %}
                    <option value={{i.id}}>{{i.title}}</option>
                {% endfor %}
                </select>
            </p>
        <input id="modal_add_student" type="button" value="提交">
        <span id="error" style="color:red;"></span>
    </div>

     　　-引入jq ，写出showmodal事件

<script src="/static/jquery-1.12.4.js" ></script>
    <script>
        $('#showmodal').click(function () {
            $('#shadow,#modal').removeClass('hide');  //这一步去掉hide让它显示
        })

 　　　　-写出添加的事件函数三步走 arg需要从字符串转化为字典对象，因为需要对返回的参数进行判断，如果status：True 则用location reload（）返回当前页面，status：false 则用error标签进行message错误提醒

     $('#modal_add_student').click(function () {
               $.ajax({
                url:'/modal_add_student/',
                type:'POST',
                data:{'name':$('#name').val(), 'class_id':$('#classID').val()},
                success:function (arg) {
                    console.log(arg);
                    arg = JSON.parse(arg);
                    if (arg.status){
                        location.reload();
                    }else{
                        $('#error').text(arg.message);
                    }
                }
            })
        })
    </script>

　　　　　　-最后在views目录中写出函数

def modal_add_student(request):
    ret={'status':True,'message':None}
    try:
        name = request.POST.get('name')
        class_id = request.POST.get('class_id')
        sqlhelp.get_commit('insert into student(name,class_id) values (%s,%s)',[name,class_id, ])
    except Exception as e:
        ret['status'] = 'false'
        ret['message'] = 'error'
    return HttpResponse(json.dumps(ret))

 Ajax一对多编辑操作

　　　　-创建编辑对话框超链接（ class类操作）

   <a class="showmodal2">编辑对话框</a>

　　　　-对话框样式-modal shadow hide

　　　　-对话框客户内容添加

  <div id="editmodal"  class="modal hide">
        <h3>编辑学生信息</h3>
        <p>学生姓名：<input  id="editname" type="text" placeholder="姓名"></p>
        <p><input  id="editID" type="text" style="display: none"></p>
        <p>学生班级：
            <select id="editclassID" name="classID">
                {% for i in class_list %}
                    <option value={{i.id}}>{{i.title}}</option>
                {% endfor %}
                </select>
            </p>
        <input id="modal_edit_student" type="button" value="提交">
        <span id="editerror" style="color:red;"></span>
    </div>

　　　　-对话框函数添加 

 $('.showmodal2').click(function () {
            $('#shadow,#editmodal').removeClass('hide');

　　　　-在循环只增加班级ID的类可以用来充当班级名称的索引

 <td clsid="{{ item.class_id }}" >{{ item.title }}</td>

 

　　　　-在对话框里显示原先选定要编辑的内容

            var v = $(this).parent().prevAll();  //寻找当前标签位置
            var editID =$(v[2]).text();           //引用目标参数
            var editname =$(v[1]).text();
            var editclassID =$(v[0]).attr('clsid');
            console.log(editclassID,editID,editname);
            $('#editname').val(editname);       //将内容填入标签中 显示给客户看
            $('#editclassID').val(editclassID);
            $('#editID').val(editID);
            });

　　　　-在url.py中添加编辑函数的url

    path('modal_edit_student/',views.modal_edit_student),

　　　　-在html中编辑函数传入数据库 三步走 

 $('#modal_edit_student').click(function () {
               $.ajax({
                url:'/modal_edit_student/',
                type:'POST',
                data:{'name':$('#editname').val(), 'class_id':$('#editclassID').val(),'id':$('#editID').val()},
                dataType:'JSON',  //arg = JSON.parse(arg)
                success:function (arg) {
                    console.log(arg);
                    {#arg = JSON.parse(arg);#}
                    if (arg.status){
                        location.reload();
                    }else{
                        $('#editerror').text(arg.message);
                    }
                }
            })
        })

　　　　-在views中添加编辑函数

def modal_edit_student(request):
    ret = {'status': True, 'message': None}
    try:
        id =request.POST.get('id')
        name =request.POST.get('name')
        class_id =request.POST.get('class_id')
        sqlhelp.get_commit('update  student set name=%s,class_id=%s where id=%s',[name, class_id, id, ])
    except Exception as e:
        ret['status'] = False
        ret['message'] = "eroor"
    return HttpResponse(json.dumps(ret))

总结：一对多操作的添加操作和编辑操作思路上和单表操作一样，只不过代码更加复杂