Django学习日记-08回顾--温故知新
知识总结回顾：
-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元组