Ajax简介：
1 jQuery.get(...) 2 所有参数： 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数。 5 success: 载入成功时回调函数。 6 dataType: 返回内容格式，xml, json, script, text, html 7 8 9 jQuery.post(...) 10 所有参数： 11 url: 待载入页面的URL地址 12 data: 待发送 Key/value 参数 13 success: 载入成功时回调函数 14 dataType: 返回内容格式，xml, json, script, text, html 15 16 17 jQuery.getJSON(...) 18 所有参数： 19 url: 待载入页面的URL地址 20 data: 待发送 Key/value 参数。 21 success: 载入成功时回调函数。 22 23 24 jQuery.getScript(...) 25 所有参数： 26 url: 待载入页面的URL地址 27 data: 待发送 Key/value 参数。 28 success: 载入成功时回调函数。 29 30 31 jQuery.ajax(...) 32 33 部分参数： 34 35 url：请求地址 36 type：请求方式，GET、POST（1.9.0之后用method） 37 headers：请求头 38 data：要发送的数据 39 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") 40 async：是否异步 41 timeout：设置请求超时时间（毫秒） 42 43 beforeSend：发送请求前执行的函数(全局) 44 complete：完成之后执行的回调函数(全局) 45 success：成功之后执行的回调函数(全局) 46 error：失败之后执行的回调函数(全局) 47 48 49 accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型 50 dataType：将服务器端返回的数据转换成指定类型 51 "xml": 将服务器端返回的内容转换成xml格式 52 "text": 将服务器端返回的内容转换成普通文本格式 53 "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 54 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 55 "json": 将服务器端返回的内容转换成相应的JavaScript对象 56 "jsonp": JSONP 格式 57 使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数 58 59 如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string 60 61 converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数 62 $.ajax({ 63 accepts: { 64 mycustomtype: 'application/x-some-custom-type' 65 }, 66 67 // Expect a `mycustomtype` back from server 68 dataType: 'mycustomtype' 69 70 // Instructions for how to deserialize a `mycustomtype` 71 converters: { 72 'text mycustomtype': function(result) { 73 // Do Stuff 74 return newresult; 75 } 76 }, 77 }); 78 79 jQuery Ajax 方法列表
Ajax ：偷偷向后台发请求，页面不会刷新
1.下载引入jquery
2.
$.ajax({
url: '/add_classes.html',
type: 'GET/POST', #GET ->默认将data加到url后面提交 POST ->放在请求体进行提交
data: {'username':'root','password':'123'},
success: function(arg){
// 回调函数，arg是服务端返回的数据
}
})
------------------------------------------------------------------------------------------------------------------------------------------
下拉框的jquery取值
单个值获得 $('#').val()
修改 $('#').val(2)
多个值获得 $('#').val() 得到一个列表
修改 $('#').val([1,2])
------------------------------------------------------------------------------------------------------------------------------------------
//其他数据结构转换成字符串 适用于html
v = {'k1':'v1'} -> obj对象
str = JSON.stringify(v) ->>>>相当于python的json.dumps()
str -> "{'k1':'v1'}" ->字符串
obj = JSON.parse(str) -> obj对象 ->>>>>相当于python的json.loads()
#python序列化
字符串 = json.dumps(对象) 对象->字符串
对象 = json.loads(字符串) 字符串->对象
#javascript
字符串 = JSON.stringify(对象) 对象->字符串
对象 = JSON.parse(字符串) 字符串->对象
#应用场景：
数据传输时：
发送：字符串
接收：字符串 -> 对象
------------------------------------------------------------------------------------------------------------------------------------------
#格式
1 $.ajax({ 2 url:'', 3 type: 'GET/POST', 4 data: {}, 5 datatype: 'JSON', # 加上这个后，arg经过内部处理(也就是JSON.parse),转变成对象，不需要再进行处理 6 success:function(arg){ 7 //arg为字符串类型 8 // var obj = JSON.parse(arg) 9 } 10 })
------------------------------------------------------------------------------------------------------------------------------------------
事件委托：
$('要绑定标签的上级标签').on('click','要绑定的标签',function(){}) #触发点击后绑定事件，可以多个标签
------------------------------------------------------------------------------------------------------------------------------------------
#多对多
1 $.ajax({ 2 url:'', 3 type: 'GET/POST', 4 data: {‘k':[1,2,3,4]}, #多对多时，多个数据 5 datatype: 'JSON', 6 success:function(arg){ 7 //arg为字符串类型 8 // var obj = JSON.parse(arg) 9 } 10 })
#这样的形式提交是不行的
1 发送数据时: 2 data中的v 3 4 a. 只是字符串或数字 5 $.ajax({ 6 url:'', 7 type: 'GET/POST', 8 data: {‘k':'v1'}, 9 dataType: 'JSON', 10 success:function(arg){ 11 //arg为字符串类型 12 // var obj = JSON.parse(arg) 13 } 14 }) 15 b. 包含数组 16 $.ajax({ 17 url:'', 18 type: 'GET/POST', 19 data: {‘k':'v1'}, 20 dataType: 'JSON', 21 traditional：true, #加上这个 22 success:function(arg){ 23 //arg为字符串类型 24 // var obj = JSON.parse(arg) 25 } 26 }) 27 c. 不能包含字典 28 但可以这样： 29 $.ajax({ 30 url:'', 31 type: 'GET/POST', 32 data: {‘k':JSON.stringify({字典})}, #利用JSON进行数据转换，成字符串 33 dataType: 'JSON', 34 success:function(arg){ 35 //arg为字符串类型 36 // var obj = JSON.parse(arg) 37 } 38 })
1 var data = $('#fm').serialize(); -->> 获取form表单内所有的数据，并且可以直接将data放在ajax的data的值 2 $.ajax({ 3 data: $('#fm').serialize(), 4 })
1 总结 2 新URL方式 3 -独立页面 4 -数据量大或者条目多 5 对话框方式： 6 -数据量少或者条目少 7 -增加，编辑 8 -Ajax：考虑当前页码：td中的自定义属性 9 -页面刷新 10 删除 11 对话框 12 -不考虑分页
练习：
1 from django.shortcuts import render,redirect,HttpResponse 2 from APP01 import models 3 4 def ajax1(request): 5 return render(request,"ajax1.html") 6 7 def ajax2(request): 8 user = request.GET.get("username") 9 pwd = request.GET.get("password") 10 import time 11 time.sleep(5) 12 return HttpResponse('YES') 13 14 def ajax3(request): 15 i1 = request.POST.get("n1") 16 i2 = request.POST.get("n2") 17 try: 18 i3 = int(i1) + int(i2) 19 except Exception as e: 20 i3 = '输入格式错误' 21 return HttpResponse(i3) 22 ################################# 学生相关 ################################# 23 def ajax4(request): 24 nid = request.GET.get("nid") 25 msg = 'del success' 26 try: 27 models.Student.objects.filter(id=nid).delete() 28 except Exception as e: 29 msg = str(e) 30 return HttpResponse(msg) 31 32 def ajax8(request): 33 id = request.POST.get('id') 34 username = request.POST.get('username') 35 age = request.POST.get('age') 36 gender = request.POST.get('gender') 37 cs = request.POST.get('cs') 38 msg = 'edit success' 39 try: 40 models.Student.objects.filter(id=id).update(username=username,age=age,gender=gender,cs_id=cs) 41 except Exception as e: 42 msg = str(e) 43 return HttpResponse(msg) 44 45 def ajax9(request): 46 username = request.POST.get('username') 47 age = request.POST.get('age') 48 gender = request.POST.get('gender') 49 cs = request.POST.get('cs') 50 msg = 'add success' 51 try: 52 models.Student.objects.create(username=username,age=age,gender=gender,cs_id=cs) 53 except Exception as e: 54 msg = str(e) 55 return HttpResponse(msg) 56 57 ################################# 班级相关 ################################# 58 # 删除 59 def ajax5(request): 60 nid = request.GET.get("nid") 61 msg = 'del success' 62 try: 63 models.Classes.objects.filter(id=nid).delete() 64 except Exception as e: 65 msg = str(e) 66 return HttpResponse(msg) 67 # 编辑 68 def ajax6(request): 69 id = request.GET.get("id") 70 name = request.GET.get("name") 71 msg = 'edit success' 72 try: 73 models.Classes.objects.filter(id=id).update(name=name) 74 except Exception as e: 75 msg = str(e) 76 return HttpResponse(msg) 77 # 增加 78 def ajax7(request): 79 name = request.GET.get("name") 80 msg = 'add success' 81 try: 82 models.Classes.objects.create(name=name) 83 except Exception as e: 84 msg = str(e) 85 return HttpResponse(msg)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .btn{ 8 display: inline-block; 9 padding: 4px 12px; 10 background-color: coral; 11 color: white; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <input type="text" id="username" placeholder="用户名"> 18 <input type="password" id="password" placeholder="密码"> 19 <div class="btn" onclick="submitForm()">提交</div> 20 </div> 21 <div> 22 <input type="text" id="i1" placeholder="数字"> 23 + 24 <input type="text" id="i2" placeholder="数字"> 25 <div class="btn" onclick="addForm()">等于</div> 26 <input type="text" id="i3" placeholder="数字"> 27 </div> 28 <script src="/static/jquery-3.3.1.js"></script> 29 <script> 30 function submitForm() { 31 var u = $('#username').val(); 32 var p = $('#password').val(); 33 {#console.log(u,p);#} 34 $.ajax({ 35 url: '/ajax2.html/', 36 type: 'GET', 37 data: {username:u,password:p}, 38 success:function (arg) { {# arg ->服务器的相应内容 #} 39 console.log(arg) 40 } 41 }) 42 43 } 44 function addForm() { 45 var i1 = $('#i1').val(); 46 var i2 = $('#i2').val(); 47 {#console.log(i1,i2)#} 48 $.ajax({ 49 url: '/ajax3.html/', 50 type: 'POST', 51 data: {n1:i1,n2:i2}, 52 success:function (arg) { 53 $('#i3').val(arg); 54 // window.location.reload JS主动刷新页面 55 } 56 }) 57 } 58 </script> 59 </body> 60 </html> 61
管理系统：
py文件
1 from django.conf.urls import url 2 from django.contrib import admin 3 from APP01.views import login,students,classes,test 4 urlpatterns = [ 5 url(r'^admin/', admin.site.urls), 6 #登陆 7 url(r'^login/', login.login), 8 #注册 9 url(r'^register/',login.register), 10 # 学生 11 url(r'^students.html/', students.students), 12 url(r'^add_student.html/', students.add_student), 13 url(r'^del_student.html/', students.del_student), 14 url(r'^edit_student.html/', students.edit_student), 15 # 班级 16 url(r'^classes.html/', classes.classes), 17 url(r'^add_class.html/', classes.add_class), 18 url(r'^del_class.html/', classes.del_class), 19 url(r'^edit_class.html/', classes.edit_class), 20 # 多对多ajax测试 21 url(r'^test_ajax_list/', test.test_ajax_list), 22 23 ]
1 from django.shortcuts import render,redirect,HttpResponse 2 from APP01 import models 3 import json 4 5 def classes(request): 6 cls_list = models.Classes.objects.all() 7 tea_list = models.Teachers.objects.all() 8 return render(request,"classes.html",{'cls_list':cls_list,'tea_list':tea_list}) 9 def add_class(request): 10 response = {'status': True, 'message': None, 'data': None, 't_list': None} 11 print(request.POST) 12 try: 13 name = request.POST.get('cname') 14 teachers = [] 15 for tea in request.POST.getlist('cls_t'): 16 teachers.append(int(tea)) 17 print(teachers) 18 models.Classes.objects.create(name=name) 19 cls_obj = models.Classes.objects.filter(name=name).first() 20 cls_obj.m.set(teachers) 21 response['data'] = cls_obj.id 22 except Exception as e: 23 response['status'] = False 24 response['message'] = '用户输入错误' 25 result = json.dumps(response, ensure_ascii=False) 26 return HttpResponse(result) 27 28 def del_class(request): 29 response = {'status': True} 30 try: 31 nid = request.POST.get("nid") 32 models.Classes.objects.filter(id=nid).delete() 33 except Exception as e: 34 response['status'] = False 35 result = json.dumps(response, ensure_ascii=False) 36 return HttpResponse(result) 37 def edit_class(request): 38 response = {'code': 1000, 'message': None} 39 try: 40 nid = request.POST.get('nid') 41 name = request.POST.get('cname') 42 teachers = [] 43 for tea in request.POST.getlist('cls_t'): 44 teachers.append(int(tea)) 45 print(teachers) 46 models.Classes.objects.filter(id=nid).update(name=name) 47 cls_obj = models.Classes.objects.filter(name=name).first() 48 cls_obj.m.set(teachers) 49 except Exception as e: 50 response['code'] = 1001 51 response['message'] = str(e) 52 return HttpResponse(json.dumps(response))
1 from django.shortcuts import render,HttpResponse,redirect 2 from APP01 import models 3 def login(request): 4 if request.method == "POST": 5 username = request.POST.get('username') 6 password = request.POST.get('password') 7 if username == 'root' and password == '123': 8 request.session["is_login"] = True 9 request.session["username"] = username 10 request.session["password"] = password 11 return redirect('/students.html/') 12 return render(request, "login.html") 13 14 def register(request): 15 return render(request,"register.html")
1 from django.shortcuts import render,redirect,HttpResponse 2 from APP01 import models 3 import json 4 5 def students(request): 6 if request.session.get("is_login"): 7 stu_list = models.Student.objects.all() 8 cls_list = models.Classes.objects.all() 9 return render(request, "students.html", {"stu_list":stu_list,"cls_list":cls_list}) 10 return redirect('/login/') 11 12 def add_student(request): 13 response = {'status':True,'message':None,'data':None} 14 try: 15 username = request.POST.get('username') 16 age = request.POST.get('age') 17 gender = request.POST.get('gender') 18 cs = request.POST.get('cs_id') 19 obj = models.Student.objects.create( 20 username=username, 21 age=age, 22 gender=gender, 23 cs_id=cs 24 ) 25 response['data'] = obj.id #data对应的是这次添加的学生记录的id，将data加进响应的内容 26 except Exception as e: 27 response['status'] = False 28 response['message'] = '用户输入错误' 29 result = json.dumps(response,ensure_ascii=False) 30 return HttpResponse(result) 31 32 def del_student(request): 33 response = {'status':True} 34 try: 35 nid = request.GET.get('nid') 36 models.Student.objects.filter(id=nid).delete() 37 except Exception as e: 38 response['status'] = False 39 result = json.dumps(response, ensure_ascii=False) 40 return HttpResponse(result) 41 42 def edit_student(request): 43 response = {'code':1000,'message':None} 44 try: 45 nid = request.POST.get('nid') 46 user = request.POST.get('user') 47 age = request.POST.get('age') 48 gender = request.POST.get('gender') 49 cs_id = request.POST.get('cs_id') 50 models.Student.objects.filter(id=nid).update( 51 username = user, 52 age = age, 53 gender = gender, 54 cs_id = cs_id 55 ) 56 except Exception as e: 57 response['code'] = 1001 58 response['message'] = str(e) 59 return HttpResponse(json.dumps(response))
1 from django.db import models 2 3 # Create your models here. 4 5 class Classes(models.Model): 6 """ 7 班级表 8 """ 9 name = models.CharField(max_length=32) 10 m = models.ManyToManyField("Teachers") 11 12 class Teachers(models.Model): 13 """ 14 老师表 15 """ 16 name = models.CharField(max_length=32) 17 18 class Student(models.Model): 19 """ 20 学生表 21 """ 22 username = models.CharField(max_length=32) 23 age = models.IntegerField() 24 gender = models.BooleanField() 25 cs = models.ForeignKey(Classes)
1 from django.shortcuts import render,HttpResponse,redirect 2 3 def test_ajax_list(request): 4 if request.method == 'GET': 5 return render(request,"test.html") 6 elif request.method == 'POST': 7 print(request.POST) #<QueryDict: {'k[]': ['11', '22', '33']}> 8 print(request.POST.getlist('k')) #ajax加上 traditional：true后 -> ['11', '33', '44'] 9 return HttpResponse('ok')
HTML文件
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 <link rel="stylesheet" href="/static/plugins/bootstrap-4.1.3-dist/css/bootstrap.css"> 6 <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"> 7 <style> 8 #delModal button{ 9 float: right; 10 margin-right: 15px; 11 margin-top: 35px; 12 } 13 #delModal h4{ 14 margin-left: 20px; 15 margin-top: 25px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="container"> 21 <div style="padding: 20px 0;"> 22 <a class="btn btn-primary" id="addBtn">添加</a> 23 </div> 24 <div> 25 <table class="table table-bordered table-striped"> 26 <thead> 27 <tr> 28 <th>ID</th> 29 <th>班级名称</th> 30 <th>任命老师</th> 31 <th>操作</th> 32 </tr> 33 </thead> 34 <tbody id="tb"> 35 {% for row in cls_list %} 36 <tr nid="{{ row.id }}"> 37 <td na="nid">{{ row.id }}</td> 38 <td na="cname">{{ row.name }}</td> 39 <td na="cls_t"> 40 {% for item in row.m.all %} 41 <span tid="{{ item.id }}">{{ item.name }}</span> 42 {% endfor %} 43 </td> 44 <td> 45 <a href="#" class="fa fa-close del-row"></a> {# 绑定点击删除事件 #} 46 <a href="#" class="fa fa-edit edit-row"></a> {# 绑定点击编辑事件 #} 47 </td> 48 </tr> 49 {% endfor %} 50 </tbody> 51 </table> 52 </div> 53 </div> 54 55 <!-- addModal --> 56 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 57 <div class="modal-dialog" role="document"> 58 <div class="modal-content"> 59 <div class="modal-header"> 60 <h4 class="modal-title" id="myModalLabel">创建班级</h4> 61 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 62 </div> 63 <div class="modal-body"> 64 {# {#表单#} 65 <form id="fm1" class="form-horizontal"> 66 <div class="form-group"> 67 <label for="name" class="col-sm-2 control-label">名称</label> 68 <div class="col-sm-10"> 69 <input type="text" class="form-control" name="cname" placeholder="班级名称"> 70 </div> 71 </div> 72 <div class="form-group"> 73 <label for="teachers" class="col-sm-2 control-label">老师</label> 74 <div class="col-sm-10"> 75 <select class="form-control" name="cls_t" multiple> 76 {% for row in tea_list %} 77 <option value="{{ row.id }}">{{ row.name }}</option> 78 {% endfor %} 79 </select> 80 </div> 81 </div> 82 </form> 83 </div> 84 <div class="modal-footer"> 85 <span id="errorMsg" style="color: red;"></span> 86 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 87 <button type="button" class="btn btn-primary" id="btnSave">保存</button> 88 </div> 89 </div> 90 </div> 91 </div> 92 <!-- editModal --> 93 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 94 <div class="modal-dialog" role="document"> 95 <div class="modal-content"> 96 <div class="modal-header"> 97 <h4 class="modal-title" id="myModalLabel">编辑班级</h4> 98 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 99 </div> 100 <div class="modal-body"> 101 {# {#表单#} 102 <form class="form-horizontal"> 103 <input type="text" name="nid" style="display: none"> 104 <div class="form-group"> 105 <label for="cname" class="col-sm-2 control-label">名称</label> 106 <div class="col-sm-10"> 107 <input type="text" class="form-control" name="cname" placeholder="班级名称"> 108 </div> 109 </div> 110 <div class="form-group"> 111 <label for="teacher" class="col-sm-2 control-label">老师</label> 112 <div class="col-sm-10"> 113 <select class="form-control" name="cls_t" multiple> 114 {% for row in tea_list%} 115 <option value="{{ row.id }}">{{ row.name }}</option> 116 {% endfor %} 117 </select> 118 </div> 119 </div> 120 </form> 121 </div> 122 <div class="modal-footer"> 123 <span id="errorMsg" style="color: red;"></span> 124 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 125 <button type="button" class="btn btn-primary" id="btnEditSave">保存</button> 126 </div> 127 </div> 128 </div> 129 </div> 130 <!-- delModal --> 131 <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 132 <div class="modal-dialog" role="document"> 133 <div class="modal-content" style="width: 450px;height: 150px;"> 134 <h4>删除班级信息?</h4> 135 <div><input id="delNid" type="text" style="display: none;"></div> 136 <div> 137 <button type="button" class="btn btn-default">取消</button> 138 <button id="delConfirm" type="button" class="btn btn-danger">确定</button> 139 </div> 140 </div> 141 </div> 142 </div> 143 <script src="/static/js/jquery-3.3.1.js"></script> 144 <script src="/static/plugins/bootstrap-4.1.3-dist/js/bootstrap.js"></script> 145 <script> 146 $(function () { 147 bindEvent(); 148 bindSave(); 149 bindDel(); 150 bindDelConfirm(); 151 bindEdit(); 152 bindEditConfirm() 153 }); 154 //添加 155 function bindEvent() { 156 $('#addBtn').click(function () { 157 $('#addModal').modal('show') 158 }) 159 } 160 //添加保存 161 function bindSave() { 162 $('#btnSave').click(function () { 163 var postData = {}; 164 $('#addModal').find('input,select').each(function () { 165 var v = $(this).val(); 166 var n = $(this).attr('name'); 167 postData[n] = v; 168 }); 169 $.ajax({ 170 url: /add_class.html/, 171 type: 'POST', 172 data: postData, 173 dataType: 'JSON', 174 traditional: true, 175 success:function (arg) { 176 console.log(arg); 177 if(arg.status){ 178 createRow(postData,arg.data); 179 $('#addModal').modal('hide'); 180 } 181 else{ 182 $('#errorMsg').text(arg.message); 183 } 184 } 185 }) 186 }) 187 } 188 //删除 189 function bindDel() { 190 $('#tb').on('click','.del-row',function () { 191 $('#delModal').modal('show'); 192 var rowId = $(this).parent().parent().attr('nid'); 193 $('#delNid').val(rowId); 194 }) 195 } 196 //删除保存 197 function bindDelConfirm() { 198 $('#delConfirm').click(function () { 199 var rowId = $('#delNid').val(); 200 $.ajax({ 201 url: /del_class.html/, 202 type: "POST", 203 data: {nid:rowId}, 204 dataType: 'JSON', 205 success:function (arg) { 206 if(arg.status){ 207 $('tr[nid="'+rowId+'"]').remove(); 208 $('#delModal').modal('hide'); 209 } 210 } 211 }) 212 }) 213 } 214 //编辑 215 function bindEdit() { 216 $('#tb').on('click','.edit-row',function () { 217 $('#editModal').modal('show'); 218 $(this).parent().prevAll().each(function () { 219 var v = $(this).text(); 220 var n = $(this).attr('na'); 221 console.log(v,n); 222 if(n=='cls_t'){ 223 var arr1 = []; 224 var arr2 = []; 225 $(this).children('span').each(function () { 226 var a = $(this).attr('tid'); 227 var b = $(this).text(); 228 arr1.push(a); 229 arr2.push(b); 230 }); 231 $('#editModal select[name="cls_t"]').children('option').each(function () { 232 var c = $(this).text(); 233 console.log(c); 234 for (var i=0;i<arr2.length;i++){ 235 if(c==arr2[i]){ 236 $(this).prop('selected',true); 237 } 238 } 239 }) 240 } 241 else{ 242 $('#editModal input[name="'+n+'"]').val(v); 243 } 244 }) 245 }) 246 } 247 //编辑保存 248 function bindEditConfirm() { 249 $('#btnEditSave').click(function () { 250 var postData = {}; 251 $('#editModal').find('input,select').each(function () { 252 var v = $(this).val(); 253 var n = $(this).attr('name'); 254 postData[n] = v; 255 }); 256 console.log(postData); 257 $.ajax({ 258 url: '/edit_class.html/', 259 type: 'POST', 260 data: postData, 261 dataType: 'JSON', 262 traditional: true, 263 success:function (arg) { 264 console.log(arg); 265 if(arg.code==1000){ 266 {#$('#editModal').modal('hide');#} 267 window.location.reload(); 268 }else{ 269 alert(arg.message); 270 } 271 } 272 }) 273 }) 274 } 275 ////添加提交，js直接创建新行,不刷新页面 276 function createRow(postData,nid) { 277 var tr = document.createElement('tr'); 278 $(tr).attr('nid',nid); 279 280 var tdId = document.createElement('td'); 281 tdId.innerHTML = nid; 282 $(tdId).attr('na','nid'); 283 $(tr).append(tdId); 284 285 var tdName = document.createElement('td'); 286 tdName.innerHTML = postData.cname; 287 $(tdName).attr('na','cname'); 288 $(tr).append(tdName); 289 290 var tdTea = document.createElement('td'); 291 $(tdTea).attr('na','cls_t'); 292 for (var i=0;i<postData.cls_t.length;i++){ 293 var span = document.createElement('span'); 294 $(span).attr('tid',postData.cls_t[i]); 295 var text = $('select[name="cls_t"]').children('option[value="'+postData.cls_t[i]+'"]').eq(0).text(); 296 span.innerHTML = text; 297 $(tdTea).append(span); 298 } 299 $(tr).append(tdTea); 300 301 var tdHandle = '<td><a href="#" class="fa fa-close del-row"></a><a href="#" class="fa fa-edit edit-row"></a></td>'; 302 $(tr).append(tdHandle); 303 304 $('#tb').append(tr); 305 } 306 </script> 307 </body> 308 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="/static/plugins/bootstrap-4.1.3-dist/css/bootstrap.css"> 7 <style> 8 body{ 9 margin: 0; 10 padding: 0; 11 background-color: lightgrey; 12 } 13 #outer{ 14 background-image: url(/static/123.jpg); 15 background-repeat: no-repeat; 16 width: 100%; 17 height: 1080px; 18 } 19 #header{ 20 position: relative; 21 width: 400px; 22 height: 400px; 23 margin: 0 auto; 24 top: 100px; 25 padding: 30px 25px; 26 background-color: white; 27 color: #8590a6; 28 } 29 #container{ 30 width: 100%; 31 height: 33px; 32 text-align: center; 33 color: black; 34 margin-bottom: 10px; 35 } 36 37 .form-horizontal{ 38 vertical-align: center; 39 padding: 10px; 40 height: 250px; 41 width: 380px; 42 } 43 .btn-default{ 44 margin-top: 20px; 45 background-color: dodgerblue; 46 color: white; 47 width: 240px; 48 margin-bottom: 20px; 49 margin-left: 25px; 50 } 51 .form-group{ 52 width: 380px; 53 margin-left: 10px; 54 } 55 .btn-success{ 56 color: white; 57 width: 240px; 58 margin-left: 25px; 59 } 60 </style> 61 </head> 62 <body> 63 <div id="outer"> 64 <div id="header"> 65 <div id="container"> 66 <h4>Welcome to BOE system</h4> 67 </div> 68 <form class="form-horizontal" action="/login/" method="post" novalidate> 69 <div class="form-group"> 70 <label for="inputEmail3" class="col-sm-2 control-label">用户</label> 71 <div class="col-sm-10"> 72 <input name="username" type="email" class="form-control" id="inputEmail3" placeholder="用户名"> 73 </div> 74 </div> 75 <div class="form-group"> 76 <label for="inputPassword3" class="col-sm-2 control-label">密码</label> 77 <div class="col-sm-10"> 78 <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="密码"> 79 </div> 80 </div> 81 <div class="form-group"> 82 <div class="col-sm-offset-2 col-sm-10"> 83 <input type="submit" value="登陆" class="btn btn-default"> 84 <input type="button" value="注册" class="btn btn-success"> 85 </div> 86 </div> 87 </form> 88 </div> 89 </div> 90 </body> 91 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="/static/plugins/bootstrap-4.1.3-dist/css/bootstrap.css"> 7 <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"> 8 <style> 9 #delModal button{ 10 float: right; 11 margin-right: 15px; 12 margin-top: 35px; 13 } 14 #delModal h4{ 15 margin-left: 20px; 16 margin-top: 25px; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="container"> 22 <div style="padding: 20px 0;"> 23 <a class="btn btn-primary" id="addBtn">添加</a> 24 </div> 25 <div> 26 <table class="table table-bordered table-striped"> 27 <thead> 28 <tr> 29 <th>ID</th> 30 <th>姓名</th> 31 <th>年龄</th> 32 <th>性别</th> 33 <th>班级</th> 34 <th>操作</th> 35 </tr> 36 </thead> 37 <tbody id="tb"> 38 {% for row in stu_list %} 39 <tr nid="{{ row.id }}"> 40 <td na="nid">{{ row.id }}</td> 41 <td na="user">{{ row.username }}</td> 42 <td na="age">{{ row.age }}</td> 43 <td na="gender">{{ row.gender }}</td> 44 <td na="cs_id" cid="{{ row.cs_id }}">{{ row.cs.name }}</td> 45 <td> 46 <a href="#" class="fa fa-close del-row"></a> {# 绑定点击删除事件 #} 47 <a href="#" class="fa fa-edit edit-row"></a> {# 绑定点击编辑事件 #} 48 </td> 49 </tr> 50 {% endfor %} 51 </tbody> 52 </table> 53 </div> 54 </div> 55 56 <!-- addModal --> 57 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 58 <div class="modal-dialog" role="document"> 59 <div class="modal-content"> 60 <div class="modal-header"> 61 <h4 class="modal-title" id="myModalLabel">创建学生</h4> 62 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 63 </div> 64 <div class="modal-body"> 65 {# {#表单#} 66 <form class="form-horizontal"> 67 <div class="form-group"> 68 <label for="username" class="col-sm-2 control-label">姓名</label> 69 <div class="col-sm-10"> 70 <input type="text" class="form-control" name="username" placeholder="姓名"> 71 </div> 72 </div> 73 <div class="form-group"> 74 <label for="age" class="col-sm-2 control-label">年龄</label> 75 <div class="col-sm-10"> 76 <input type="text" class="form-control" name="age" placeholder="年龄"> 77 </div> 78 </div> 79 <div class="form-group"> 80 <label for="gender" class="col-sm-2 control-label">性别</label> 81 <div class="col-sm-10"> 82 <label class="radio-inline"> 83 <input type="radio" name="gender" value="1"> 男 84 </label> 85 <label class="radio-inline"> 86 <input type="radio" name="gender" value="0"> 女 87 </label> 88 </div> 89 </div> 90 <div class="form-group"> 91 <label for="gender" class="col-sm-2 control-label">班级</label> 92 <div class="col-sm-10"> 93 <select class="form-control" name="cs_id"> 94 {% for row in cls_list%} 95 <option value="{{ row.id }}">{{ row.name }}</option> 96 {% endfor %} 97 </select> 98 </div> 99 </div> 100 </form> 101 </div> 102 <div class="modal-footer"> 103 <span id="errorMsg" style="color: red;"></span> 104 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 105 <button type="button" class="btn btn-primary" id="btnSave">保存</button> 106 </div> 107 </div> 108 </div> 109 </div> 110 <!-- editModal --> 111 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 112 <div class="modal-dialog" role="document"> 113 <div class="modal-content"> 114 <div class="modal-header"> 115 <h4 class="modal-title" id="myModalLabel">编辑学生</h4> 116 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 117 </div> 118 <div class="modal-body"> 119 {# {#表单#} 120 <form class="form-horizontal"> 121 <input type="text" name="nid" style="display: none"> 122 <div class="form-group"> 123 <label for="username" class="col-sm-2 control-label">姓名</label> 124 <div class="col-sm-10"> 125 <input type="text" class="form-control" name="user" placeholder="姓名"> 126 </div> 127 </div> 128 <div class="form-group"> 129 <label for="age" class="col-sm-2 control-label">年龄</label> 130 <div class="col-sm-10"> 131 <input type="text" class="form-control" name="age" placeholder="年龄"> 132 </div> 133 </div> 134 <div class="form-group"> 135 <label for="gender" class="col-sm-2 control-label">性别</label> 136 <div class="col-sm-10"> 137 <label class="radio-inline"> 138 <input type="radio" name="gender" value="1"> 男 139 </label> 140 <label class="radio-inline"> 141 <input type="radio" name="gender" value="0"> 女 142 </label> 143 </div> 144 </div> 145 <div class="form-group"> 146 <label for="gender" class="col-sm-2 control-label">班级</label> 147 <div class="col-sm-10"> 148 <select class="form-control" name="cs_id"> 149 {% for row in cls_list%} 150 <option value="{{ row.id }}">{{ row.name }}</option> 151 {% endfor %} 152 </select> 153 </div> 154 </div> 155 </form> 156 </div> 157 <div class="modal-footer"> 158 <span id="errorMsg" style="color: red;"></span> 159 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 160 <button type="button" class="btn btn-primary" id="btnEditSave">保存</button> 161 </div> 162 </div> 163 </div> 164 </div> 165 <!-- delModal --> 166 <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 167 <div class="modal-dialog" role="document"> 168 <div class="modal-content" style="width: 450px;height: 150px;"> 169 <h4>删除学生信息?</h4> 170 <div><input id="delNid" type="text" style="display: none;"></div> 171 <div> 172 <button type="button" class="btn btn-default">取消</button> 173 <button id="delConfirm" type="button" class="btn btn-danger">确定</button> 174 </div> 175 </div> 176 </div> 177 </div> 178 <script src="/static/js/jquery-3.3.1.js"></script> 179 <script src="/static/plugins/bootstrap-4.1.3-dist/js/bootstrap.js"></script> 180 <script> 181 // 页面加载完毕后执行 182 $(function () { 183 bindEvent(); 184 bindSave(); 185 bindDel(); 186 bindDelConfirm(); 187 bindEdit(); 188 bindEditConfirm(); 189 }); 190 //绑定编辑弹出框事件 191 function bindEdit() { 192 $('#tb').on('click','.edit-row',function () { 193 $('#editModal').modal('show'); 194 //获取当前行的数据 195 $(this).parent().prevAll().each(function () { 196 var v = $(this).text(); 197 var n = $(this).attr('na'); 198 //将数据赋值到对应的对话框的指定位置 199 if(n=='cs_id'){ 200 var cid = $(this).attr('cid'); 201 $('#editModal select[name="cs_id"]').val(cid); 202 }else if(n=='gender'){ 203 if(v=='True'){ 204 $('#editModal :radio[value="1"]').prop('checked',true); 205 }else{ 206 $('#editModal :radio[value="0"]').prop('checked',true); 207 } 208 }else{ 209 //n是字符串 210 $('#editModal input[name="'+n+'"]').val(v); 211 } 212 }); 213 }) 214 } 215 //绑定编辑确认点击事件 216 function bindEditConfirm() { 217 $('#btnEditSave').click(function () { 218 var postData = {}; 219 $('#editModal').find('input,select').each(function () { 220 var v = $(this).val(); 221 var n = $(this).attr('name'); 222 if(n=='gender'){ 223 if($(this).prop('checked')){ 224 postData[n] = v; 225 } 226 }else{ 227 postData[n] = v; 228 } 229 }); 230 $.ajax({ 231 url: '/edit_student.html/', 232 type: 'POST', 233 data: postData, 234 dataType: 'JSON', 235 success:function (arg) { 236 console.log(arg); 237 if(arg.code == 1000){ 238 window.location.reload(); 239 }else{ 240 alert(arg.message); 241 } 242 } 243 }) 244 }) 245 } 246 247 //绑定删除弹出框事件 248 function bindDel() { 249 //事件委托,只有当点击时才绑定事件，再执行 250 $('#tb').on('click','.del-row',function () { //绑定a标签，当增加a标签时不能绑定事件：$('.del-row').click(function () 251 $('#delModal').modal('show'); //点击打开对话框 252 //获取要删除信息的ID 253 var rowId = $(this).parent().parent().attr('nid'); 254 //设置ID给弹出框的delNid 255 $('#delNid').val(rowId); 256 console.log(rowId); 257 }) 258 } 259 //绑定删除确认点击事件 260 function bindDelConfirm() { 261 $('#delConfirm').click(function () { 262 var rowId = $('#delNid').val(); 263 console.log(rowId); 264 $.ajax({ 265 url: /del_student.html/, 266 type: 'GET', 267 data: {nid:rowId}, 268 success:function (arg) { 269 var dict = JSON.parse(arg); 270 if(dict.status){ 271 $('tr[nid="'+rowId+'"]').remove(); //删除对应tr行 272 $('#delModal').modal('hide'); //点击关闭对话框 273 } 274 } 275 }) 276 }) 277 } 278 279 //绑定添加弹出框点击事件 280 function bindEvent() { 281 $('#addBtn').click(function () { 282 $('#addModal').modal('show'); //点击打开对话框 283 }) 284 } 285 //绑定添加保存点击事件 286 function bindSave() { 287 $('#btnSave').click(function () { 288 var postData = {}; 289 $('#addModal').find('input,select').each(function () { 290 console.log($(this)[0]); 291 var v = $(this).val(); 292 var n = $(this).attr('name'); 293 if(n=='gender'){ 294 if($(this).prop('checked')){ 295 postData[n] = v; 296 } 297 }else{ 298 postData[n] = v; 299 } 300 }); 301 /*postData = { 302 username:'', 303 age:'', 304 gender:'', 305 cs_id:'' 306 }*/ 307 $.ajax({ 308 url: /add_student.html/, 309 type: 'POST', 310 data: postData, 311 success:function (arg) { 312 console.log(arg); 313 //arg是字符串 314 //JSON.parse将字符串转换成字典，相当于json.loads 315 var dict = JSON.parse(arg); 316 if(dict.status){ 317 //页面会刷新 318 //window.location.reload(); 319 //页面不刷新 320 //自增id = dict.data 321 createRow(postData,dict.data); //添加行记录 322 $('#addModal').modal('hide'); //关闭对话框 323 }else{ 324 $('#errorMsg').text(dict.message); 325 } 326 } 327 }); 328 {#console.log(postData)#} 329 }) 330 } 331 //添加提交，js直接创建新行,不刷新页面 332 function createRow(postData,nid) { 333 //创建行 334 var tr = document.createElement('tr'); 335 $(tr).attr('nid',nid); 336 //id 337 var tdId = document.createElement('td'); 338 tdId.innerHTML = nid; 339 $(tr).append(tdId); 340 //username 341 var tdUser = document.createElement('td'); 342 tdUser.innerHTML = postData.username; 343 $(tr).append(tdUser); 344 //age 345 var tdAge = document.createElement('td'); 346 tdAge.innerHTML = postData.age; 347 $(tr).append(tdAge); 348 //gender 349 var tdGen = document.createElement('td'); 350 if(postData.gender == "0"){ 351 tdGen.innerHTML = 'False'; 352 }else{ 353 tdGen.innerHTML = 'True' 354 } 355 $(tr).append(tdGen); 356 //cs 357 var tdCs = document.createElement('td'); 358 var text = $('select[name="cs_id"]').find('option[value="'+postData.cs_id+'"]').text(); 359 tdCs.innerHTML = text; 360 $(tr).append(tdCs); 361 //操作 362 var tdHandle = '<td><a href="#" class="fa fa-close del-row"></a><a href="#" class="fa fa-edit edit-row"></a></td>'; 363 $(tr).append(tdHandle); 364 //将tr加进tbody内 365 $('#tb').append(tr); 366 } 367 </script> 368 </body> 369 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 {# 多对多演示 #} 9 <div> 10 <select multiple id="sel"> 11 <option value="11">上海</option> 12 <option value="22">北京</option> 13 <option value="33">广州</option> 14 <option value="44">深圳</option> 15 </select> 16 <input type="button" value="提交" id="testAjaxList"> 17 </div> 18 <script src="/static/js/jquery-3.3.1.js"></script> 19 <script> 20 $(function () { 21 bindTestAjaxList(); 22 }); 23 function bindTestAjaxList() { 24 $("#testAjaxList").click(function () { 25 var values = $('#sel').val(); 26 console.log(values); 27 $.ajax({ 28 url: '/test_ajax_list/', 29 type: 'POST', 30 data: {'k':values}, 31 traditional: true, 32 success:function (arg) { 33 console.log(arg); 34 } 35 }) 36 }) 37 } 38 </script> 39 </body> 40 </html>
问题：
1.编辑班级时，当第一个被点击时，后续点击的行，模态框显示的已选老师都是一样的，没有根据本身班级已选老师来显示。