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