模态对话框,适应少量输入框,简单数据处理,example:登录窗口
新url:大量数据,大量操作
Form表单提交,页面会刷新
Ajax提交,页面不刷新
js实现页面跳转
location.href="url"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>班级</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
z-index: 99;
}
.modal{
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<h1>班级列表</h1>
<div>
<a href="/add_class/">添加</a>
<button><a onclick="showModal()">模态对话框添加</a></button>
</div>
<table>
<thead>
<tr>
<td>ID</td>
<td>班级名称</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{% for row in classes_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.title }}</td>
<td>
<a href="/edit_class/?id={{ row.id }}">编辑</a>
<a href="/del_class/?id={{ row.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="modal hide">
<p>
班级名称:<input type="text" id="title" name="title"/>
<input type="button" value="提交" onclick="AjaxSend()">
<input type="button" value="取消" onclick="CancelModal()"><span id="errmsg"></span>
</p>
</div>
<script src="/static/jquery-3.4.1.js"></script>
<script>
function showModal() {
document.getElementById('shadow').classList.remove('hide')
document.getElementById('modal').classList.remove('hide')
}
function CancelModal() {
document.getElementById('shadow').classList.add('hide')
document.getElementById('modal').classList.add('hide')
}
function AjaxSend() {
$.ajax({
url:'/modal_add_class/',
type:'POST',
data:{'title':$('#title').val()},
success:function (data) {
console.log(data)
if(data=='ok'){
alert('添加成功!')
location.href="/classes/";
}else{
alert('添加失败!')
$('#errmsg').text(data);
}
}
})
}
</script>
</body>
</html>