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; 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');