Django学习日记-07Ajax多对多表添加 编辑操作

Ajax模板多对多添加操作：

　　　　-添加模板shadow modal hide

　　　　-添加标签ID链接

　　　　-编写showmodla函数 

有两种展现表内容select列表的方式 第一种是在modol的div中填写填充数据，这种函数是在你点开网站的时候就已经加载好了，只是hide隐藏了而已

<div id="modall"  class="modal hide">
        <p>老师姓名：<input  id="name" type="text" placeholder="姓名"></p>
        <p>任教班级：
            <select id="classID" 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="提交">
    </div>

  第二种是客户点击调用的时候才加载函数，写在showmodal里面 在AJax里面发送请求获取所有班级信息，再用classIDS

下拉框生成option

$('#showmodal').click(function (){
            $('#shadow,#modal').removeClass('hide');

            $.ajax({
                url:'/get_all_class/',
                type:'GET',
                dataType:'JSON',
                success:function(arg){
                    console.log(arg);
                    $.each(arg,function(i,row){       //开启循环
                        var tag = document.createElement('option');  //建立option选项
                        tag.innerHTML = row.title;  //建立内部标签
                        tag.setAttribute('value', row.id);  //建立属性
                        $('#classID').append(tag);   //添加到select选择中
                    });

                }
            })
        }) ;

　　　　　　-第二种还需要调用get_all_class函数 ，抓取全部班级

def get_all_class(request):
    obj = sqlhelp.SqlHelper()
    class_list = obj.get_all('select id,title from class',[])
    obj.close()

　　　　　　-编写post提交超链接

　　　　　　-method == POST方式ajax函数编写

dataType:'JOSN' 是把views成功或者失败返回的arg从字符串转换为字典对象，从而可以对其判断状态Ture 或者 False

traditional：true 是对于class_id_list返回的列表进行处理 或者返回status失败

  $('#modal_add_teacher').click(function() {
            var name = $('#name').val();
            var class_id_list = $('#classID').val();
            $.ajax({
                url:'/modal_add_teacher/',
                type:'POST',
                data:{'name':name,'class_id_list':class_id_list},
                dataType: 'JSON',
                traditional:true,
                success:function(arg){
                    {#console.log(name,class_id_list);#}
                    if(arg.status){
                        location.reload();
                    }else {
                        alert(arg.message);
                    }
                }
            })

        })

　　　　　　-编写post方式的函数 类似于一对多操作添加

注意Ajax的返回方式只能是字符串 HtmlResponse

 json.dumps()是把字典转换成字符串

def modal_add_teacher(request):
     ret = {'status': True, 'message': None}
     try:
        name = request.POST.get('name')
        class_id_list = request.POST.getlist('class_id_list')
        obj = sqlhelp.SqlHelper()
        teacher_id = obj.last_row_id('insert into teacher(name) values (%s)',[name, ])
        data_list = []
        for item in class_id_list:
            temp = (teacher_id,item,)
            data_list.append(temp)
        obj.multiple_get_commit('insert into teacher2class(teacher_id,class_id) values (%s,%s)',data_list)
        obj.close()
     except Exception as e :
         ret['status'] = False
         ret['message'] = 'False'
     return HttpResponse(json.dumps(ret))

对于JS动态加载图的样式增加 loading 在加载出动态模板框时有一个加载效果（转圈圈）

    .loading{
            position: fixed;
            width: 32px;
            height: 32px;
            left: 50%;
            top:50%;
            margin-left: -16px;
            margin-top: -16px;
            background-image: url("/static/images/loading.gif");

        }

<div id="loading" class="loading hide"></div>

  然后穿插在modal之前即可

 　　　　　　　　　　　　　　$('#loading').addClass('hide');
                        $('#addModal').removeClass('hide');