知识总结回顾:
-Ajax全部操作在一个html页面执行,对于之前的Ajax操作中事件的发生于其对于的联系方式相关,思路上首先都在思考编写模板内容部分,然后在是函数的执行
- 使用 id = ‘事件名’ 与其对应的是 <script> $.('# 事件名').click(function() {
xxxxx
}) </script>
<input id="modal_add_student" type="button" value="提交"> $('#modal_add_student').click(function () { $.ajax({ url: '/modal_add_student/', type: 'POST', data: {'name': $('#xname').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); } } }) });
- 使用 onclick = ‘事件名();’ 与其对应的是<script > function 事件名() {
xxxxx
} </script>
<input onclick="AjaxSend();" type="button" value="提交"> function AjaxSend() { {#内容和form一样 怎么发 发到哪 发什么东西#} $.ajax({ url: '/modal_add_class/', type: 'POST', data: {'title': $('#title').val()}, success: function (data) { //当服务端处理完成后,自动调用 //data表示服务端返回的值 console.log(data); if (data == 'ok'){ location.href='/class/' } else { $('#eorrmsg').text(data) } } }) }
对应css<style>部分是关于遮罩层shadow,模板modal,隐藏层hide部分内容
-增加部分:在modal模板提交按钮添加事件用id或者onclick都行 , ajax三步走url,type:‘post’,data需要要到$('#xxx'.val())添加客户输入的内容
-可以有两种方法的增加
一种是客户填写在html的内容根据属性直接抓取在AJax里面使用
$('#modal_add_student').click(function () { $.ajax({ url: '/modal_add_student/', type: 'POST', data: {'name': $('#xname').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); } } }) });
第二种是需要用到内部数据库资源,在打开modal模板时利用js调取option选项,再利用事件用ajax执行
下面是多项式的操作 在Ajax用get获取数据库数据 用each循环抓取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选择中 }); } }) }) ;
var v =$(this).parent().prevAll();
var editID = $(v[2]).text();
var editname = $(v[1]).text();
var edit_classID = $(v[0]).attr('clsid');
console.log(editID,editname,edit_classID);
$('#enitID').val(editID);
$('#editname').val(editname);
$('#editclassID').val(edit_classID);
}) ;
$('#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); } } }) })
-编辑部分
作者暂时做不出来 TAT
- 新URL大同小异 思路在于先编写好新的HTML页面 在根据页面在views中写入函数
-增加部分:如果有多项选择式需要用到form表单的for循环 <option value=‘{{item.xxx}}’> 中value属性专门写入选择项序号 placeholder的form属性中用来提醒用户输入内容的
<form method="POST" action="/add_teacher/"> 老师名称:<input type="text" name="name" placeholder="老师姓名 "> <p>任教班级: <select name="class_id" multiple> {% for i in result %} <option value="{{ i.id }}">{{ i.title }}</option> {% endfor %} </select> </p> <input type="submit" value="提交"> </form>
与其对应的函数也应该是一个元组的形式输入即(学生id:学生课程)=(2,3),(2,4),(2,6)需要用一个空列表排列出来
def add_teacher(request): if request.method == 'GET': result= sqlhelp.get_all('select id,title from class ', [ ] ) return render(request,'add_teacher.html',{'result':result}) else: name =request.POST.get('name') class_id = request.POST.getlist('class_id') # print(name,class_id) obj =sqlhelp.SqlHelper() teacher_id = obj.last_row_id('insert into teacher(name) values (%s)',[name, ]) # 多次链接 多次提交 # for cls_id in class_id: # sqlhelp.get_commit('insert into teacher2class(teacher_id,class_id) values (%s,%s)',[teacher_id,cls_id,]) # 一次链接 多次提交 # for cls_id in class_id: # obj.get_commit('insert into teacher2class(teacher_id,class_id) values (%s,%s)',[teacher_id,cls_id,]) # obj.close() # 一次链接 一次提交 data_list = [ ] for cls_id in class_id: temp = (teacher_id,cls_id,) data_list.append(temp) obj.multiple_get_commit('insert into teacher2class(teacher_id,class_id) values (%s,%s)',data_list) obj.close() return redirect('/teacher/')
-编辑部分: 在html页面以{{xxxx}}的方式显示填入之前客户需要修改的内容
在函数中则get传入参数 post获取参数 然后在执行相应操作
值得注意的是编多项式操作get需要多个list传入 post需要先将旧数据全部删除 再插入参数 get_multiple_commit元组