day-59Django
项目跟进
服务端:
## 模态对话框修改班级 def ajax_up_classes(request): classname = request.POST.get('classname') classid = request.POST.get('classid') res = {"code":None, "data":None} try: import pymysql conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='s8day58', charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) sql = "update classes set name = %s where id=%s" cursor.execute(sql, (classname,classid)) conn.commit() res["code"] = 10000 res['data'] = "success" # return HttpResponse(json.dumps(res)) 序列化字典发送 return JsonResponse(res) except Exception as e: res['code'] = 10001 res['data'] = str(e) # return HttpResponse(json.dumps(res)) return JsonResponse(res) ### 查看学生列表 sqlhelper = SqlHelper() def students(request): sql = "select students.id, students.name as sname, students.class_id as cid, classes.name as cname from students left join classes on students.class_id = classes.id" students = sqlhelper.getAll(sql) #学生id 学生name 学生关联班级cid(班级id) 班级的name return render(request, "students.html", {"students": students}) ## 增加学生 def add_student(request): if request.method == 'GET': #分流之数据发往html sql = "select * from classes" classes = sqlhelper.getAll(sql) return render(request, "add_student.html", {"classes": classes}) else: sname = request.POST.get('sname') classid = request.POST.get('classid') sql = "insert into students (name, class_id) values (%s, %s)" sqlhelper.insert(sql, (sname, classid)) return redirect('/students/') def up_student(request): if request.method == 'GET': id = request.GET.get('id') sql = "select students.id as sid, students.name as sname, students.class_id as cid, classes.name as cname from students left join classes on students.class_id = classes.id where students.id=%s" student = sqlhelper.getOne(sql, (id)) sql = "select * from classes" classes = sqlhelper.getAll(sql) return render(request, 'up_student.html', {"student":student, "classes":classes}) else: classid = request.POST.get('classid') stuname = request.POST.get('stuname') stuid = request.POST.get('stuid') sql = "update students set class_id = %s, name = %s where id=%s" sqlhelper.update(sql, (classid, stuname, stuid)) return redirect('/students/') urlpatterns = [ # url(r'^admin/', admin.site.urls), url(r'^classes/', classes), url(r'^add_class/', add_class), url(r'^modal_add_class/', modal_add_class), url(r'^del_class/', del_class), url(r'^up_class/', up_class), url(r'^ajax_up_classes/', ajax_up_classes), url(r'^students/', students), url(r'^add_student/', add_student), url(r'^up_student/', up_student), ]
class.html:
<div class="editshadow"></div> <div class="editcontent"> <input type="hidden" id="clasid"> 班级名: <input type="text" name="ajaxclassname" id="ajaxclassname"> <input type="button" value="提交" id="ajaxtijiao"> <input type="button" id="cancel" value="取消"> <span id="error"></span> </div> </body> <script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script> function xxxxx(){ res = window.confirm("是否确定删除?"); return res; } $('#btn').click(function () { $(".shadow").show(); $(".content").show(); }); $('#cancel').click(function () { $(".shadow").hide(); $(".content").hide(); }); $('.ajax_class_modal').click(function () { $('.editshadow, .editcontent').show(); var tds = $(this).parent().prevAll(); #1. 获取当前的标签 $(this) 2. 获取他爹 $(this).parent() 3. 找 大爷和二爷 $(this).parent().prevAll() var classname = $(tds[0]).text(); #注:班级是0 id 是1 var classid = $(tds[1]).text(); $('#ajaxclassname').val(classname); $('#clasid').val(classid); #创建一个长链接储存的容器(存放id) }); $('#tijiao').click(function () { $.ajax({ type: "POST", url : "/modal_add_class/", data: {"classname":$('#classname').val()}, success: function (data) { if(data == 'ok'){ alert('添加成功!'); window.location.href = '/classes/'; }else{ alert('添加失败!'); $('#error').text(data) } } }) }); $('#ajaxtijiao').click(function () { var classname = $('#ajaxclassname').val(); var clasid = $('#clasid').val(); $.ajax({ type : "POST", url : '/ajax_up_classes/', data: {"classname":classname, "classid":clasid}, success : function (data) { res = JSON.parse(data); #js反序列化: if (res['code'] == 10000){ //widnow.location.href = '/classes/'; window.location.reload(); }*/ console.log(data); //console.log(data['code']); } }) }) </script> </html>
add_student.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <h2>添加学生</h2> <form action="/add_student/" method="post"> 学生名称: <input type="text" name="sname"><br> 班级名称: <select name="classid" id=""> {% for item in classes %} <option value="{{ item.id }}">{{ item.name }}</option> 发往服务器的是id,方便数据库添加 {% endfor %} </select> <input type="submit" value="提交"> </form> </body> </html>
up_students.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <h2>更新班级</h2> <form action="/up_student/" method="post"> <input type="hidden" name="stuid" value="{{ student.sid }}"> # 服务器发来的学生id(get请求)再次返回服务器,方便数据库的更改(post请求) 学生名称: <input type="text" name="sname" value="{{ students.sname }}"> 选择班级: 学生姓名: <input type="text" name="stuname" value="{{ student.sname }}" > <br> 选择班级: <select name="classid" id=""> {#如果学生的班级cid等于班级的id,表示找到,展现出来,只是为了将选中的学生的班级展现到输入框(option之selected的选中), 如果不是,就正常将id添加到name,方便返回服务器#} {% for item in classes %} {% if item.id == student.cid %} <option value="{{ item.id }}" selected>{{ item.name }}</option> {%else%} <option value="{{ item.id }}" >{{ item.name }}</option> {% endif %} {% endfor %} </select> <input type="submit" value="提交"> </form> </body> </html>
补充常见表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8888/" method="post"> 姓名:<input type="text" name="username"> <br> #没有name url没有显示,后台也无法拿到数据 密码:<input type="password" name="pwd"> <br> 爱好: <input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="basetball"> 蓝球 #复选框必须要有value,服务器取值的依据 <input type="checkbox" name="hobby" value="yumaoqiu"> 羽毛球 <br> 性别: <input type="radio" name="gender" value="male" checked>男 #checked默认选中 <input type="radio" name="gender" value="female">女 <br> #复选框必须要有value,且name值必须一样,复选框也一样 <select name="city"> <option value="bj">北京</option> <option value="tj" selected>天津</option> <option value="hb">河北</option> <option value="sd">山东</option> <option value="nm">内蒙</option> </select><br> <textarea cols="30" rows="50" name="mytext"> </textarea> <input type="submit" value="提交"> </form> </body> </html>
补充
json:
第一种方式交互:
后台返回的格式:
return HttpResponse(json.dumps(res))
前台js反序列化:
res = JSON.parse(data);
前台js的序列化:
JSON.stringify(res)
第二种方式:
后台返回的格式:
return JsonResponse((res)) # 相当于使用了json.dumps()
前台:
console.log(data) # data 已经反序列化好的字典
页面跳转两种方式:
widnow.location.href = '/classes/'; # 跳转页面
window.location.reload(); # 刷新当前页面
if..else模板:
{% if item.id == student.cid %}
<option value="{{ item.id }}" selected>{{ item.name }}</option>
{%else%}
<option value="{{ item.id }}" >{{ item.name }}</option>
{% endif %}
DOM
DOM0:
js事件绑定到标签里面
<a href="https://www.baidu.com" onclick="return del();">点击</a>
function del(){
res = window.confirm('是否确认删除?'); confiem返回的是ture或flase
return res;
}
onclick依据收到的true或flase,来判断是否执行(比如阻止a标签的页面跳转)
DOM1:
<a href="https://www.baidu.com" id="mya">点击</a>
原生js:
var a = document.getElementById('mya') ; 获取到a标签
a.onclick = function () {
res = window.confirm('是否确认删除?');
return res;
}
jquery方法:
$('#mya').click(fucntion(){
res = window.confirm('是否确认删除?');
return res;
})
注:如果想要绑定多个相同的标签的时候, 不要用id选择器, 要用class类别选择器
否则发生第一个生效,其他不生效