Django-website 程序案例系列-5 模态对话框实现提交数据
Posted 划得戳
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django-website 程序案例系列-5 模态对话框实现提交数据相关的知识，希望对你有一定的参考价值。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{ #隐藏效果
display: none;
}
.shade{ #模态框遮蔽层效果
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: black;
opacity: 0.6;
z-index: 100;
}
.add-modal{ #模态框弹出层效果
position: fixed;
height: 300px;
width: 400px;
top: 100px;
left: 50%;
z-index: 101;
border: 1px solid black;
background: white;
margin-left: -200px;
}
</style>
</head>
<body>
<h1>主机信息</h1>
<div>
<input type="button" id="add_host" value="添加"/>
</div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>业务线ID</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v1 %}
<tr host-id="{{ row.id }}" bid="{{ row.b_id }}">
<td>{{ forloop.counter }}</td>
<td>{{ row.hostname }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.b_id }}</td>
<td>{{ row.b.caption }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="shade hide"></div> #模态框图层1 遮蔽层
<div class="add-modal hide"> #模态对话框2 弹出层 add-modal绑定提交事件
<form action="/host" method="POST"> #弹出层的form表单
<div class="group">
<input type="text" placeholder="主机名" name="hostname"/>
</div>
<div class="group">
<input type="text" placeholder="IP" name="ip"/>
</div>
<div class="group">
<input type="text" placeholder="端口" name="port"/>
</div>
<div class="group">
<select name="b_id">
{% for op in b_list %}
<option value="{{ op.id }}">{{ op.caption }}</option>
{% endfor %}
</select>
</div>
<input type="submit" value="提交"/>
<input type="button" id="cancel" value="取消"/> # cancel绑定取消事件
</form>
</div>
<script src="static/js/jquery.min.js"></script>
<script>
$(function() { #页面加载完成执行一个GET请求
$(‘#add_host‘).click(function(){ #绑定点击事件
$(‘.shade,.add-modal‘).removeClass(‘hide‘); #触发删除隐藏效果（弹出模态框）
});
$(‘#cancel‘).click(function(){ #绑定点击事件
$(‘.shade,.add-modal‘).addClass(‘hide‘); #触发增加隐藏效果（关闭模态框）
});
})
</script>
</body>
</html>
views.py
def host(request):
if request.method == "GET": #页面加载时的GET请求
v1 = models.Host.objects.filter(id__gt=0)
b_list = models.Business.objects.all()
return render(request, ‘host.html‘, {‘v1‘: v1, ‘b_list‘: b_list})
elif request.method == "POST":
h = request.POST.get(‘hostname‘)
i = request.POST.get(‘ip‘)
p = request.POST.get(‘port‘)
b = request.POST.get(‘b_id‘)
# models.Host.objects.create(
# hostname=h,
# ip=i,
# port=p,
# b=models.Business.objects.get(id=b),
# )
models.Host.objects.create( #POST方法提交的数据在数据库中添加进去
hostname=h,
ip=i,
port=p,
b_id=b
)
return redirect(‘/host‘)
以上是关于Django-website 程序案例系列-5 模态对话框实现提交数据的主要内容，如果未能解决你的问题，请参考以下文章
Django-website 程序案例系列-6 html模板文件详解
Django-website 程序案例系列-16 modle.form(表单验证)