模态对话框
笔记：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
background-color: black;
height: 1000px;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.4;
z-index:999;
display:none;
}
.content{
background-color: white;
width: 500px;
height: 400px;
position:fixed;
top:100px;
left:300px;
right:200px;
z-index:1000;
display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
background-color: black;
height: 1000px;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.4;
z-index:999;
display:none;
}
.content{
background-color: white;
width: 500px;
height: 400px;
position:fixed;
top:100px;
left:300px;
right:200px;
z-index:1000;
display: none;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div class="shadow"></div>
<div class="content">
<form action="">
用户名：<input type="text">
<input type="submit">
<input type="button" id="cancel" value="取消">
</form>
</style>
</head>
<body>
<button id="btn">点我</button>
<div class="shadow"></div>
<div class="content">
<form action="">
用户名：<input type="text">
<input type="submit">
<input type="button" id="cancel" value="取消">
</form>
</div>
</body>
<script
src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
{#<script src="/static/js/jquery-3.4.1.js"></script>#}
<script>
$('#btn').click(function () {
$('.shadow').show();
<script>
$('#btn').click(function () {
$('.shadow').show();
$('.content').show();
});
$('#cancel').click(function () {
$('.shadow').hide();
});
$('#cancel').click(function () {
$('.shadow').hide();
$('.content').hide();
})
})
</script>
</html>
ajax：是无刷新的情况下进行数据的前后台交互，无刷新浏览器技术
form 表单：<form action="/up_class/" method="post">
<input type="hidden" name="classid" value="{{ classid }}">
班级名称: <input type="text" name="classname" value="{{ classname }}">
<input type="submit" value="提交"> 按钮
<input type="hidden" name="classid" value="{{ classid }}">
班级名称: <input type="text" name="classname" value="{{ classname }}">
<input type="submit" value="提交"> 按钮
班级名：<input type="text" name="classname">
<input type="button" value="提交" id="commit"> 按钮
<input type="button" id="cancel" value="取消"> 按钮
<input type="button" value="提交" id="commit"> 按钮
<input type="button" id="cancel" value="取消"> 按钮
console.log('kkk') 可以在控制台打印出来
模态对话框-更新
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<a href="/del_class/?id={{ item.id }}">删除</a>|
<a href="/up_class/?id={{ item.id }}">更新</a>
<button class="ajax_class_modal">ajax更新</button>
</td>
</tr>
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<a href="/del_class/?id={{ item.id }}">删除</a>|
<a href="/up_class/?id={{ item.id }}">更新</a>
<button class="ajax_class_modal">ajax更新</button>
</td>
</tr>
$('.ajax_class_modal').click(function () {
$('.editshadow,.editcontent').show();
{# 1、获取当前元素 2、获取他爹$(this).parent() 3、找大爷和二爷$(this).parent().prevALL()#}
var tds=$(this).parent().prevAll(); [<td>{{ item.name }}</td>， <td>{{ item.id }}</td>]
var classname=tds[0];
console.log(classname）
});
对DOM对象加$():
tds[0]====>$(tds[0])
Jquery===>DOM :
直接按索引取值：var tds=$(this).parent().preALL() ==>tds[0]
操作成功： res['code']=1000
res['data']='success'
返回： return HttpResponse(json.dumps(res))
操作失败： res['code']=10001
res['data']=str(e)
return HttpResponse(str(e))
js中反序列化 ：json.parse==loads
console.log(data);
res=JSON.parse(data);
console.log(data)
js的序列化：
JSON.stringfy(res)
直接按索引取值：var tds=$(this).parent().preALL() ==>tds[0]
操作成功： res['code']=1000
res['data']='success'
返回： return HttpResponse(json.dumps(res))
操作失败： res['code']=10001
res['data']=str(e)
return HttpResponse(str(e))
js中反序列化 ：json.parse==loads
console.log(data);
res=JSON.parse(data);
console.log(data)
js的序列化：
JSON.stringfy(res)
跳转的两种方式：window.location.href='/classes/';
window.location.reload(); 刷新当前页面
window.location.reload(); 刷新当前页面
