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 模态对话框实现提交数据
原文地址：http://www.cnblogs.com/kuku0223/p/7868859.html