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 模态对话框实现提交数据的更多相关文章
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- Django-website 程序案例系列-12 CSRF
django为用户实现防止跨站请求伪造的功能 需要配置settings.py: django.middleware.csrf.CsrfViewMiddleware 1. form表单提交 <f ...
- Django-website 程序案例系列-6 ajax案例
普通ajax案例: views.py def testajax(request): h = request.POST.get('hostname') #拿到ajax传来的值 i = request.P ...
- Django-website 程序案例系列-17 forms表单验证的字段解释
1.Django内置字段如下: Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial ...
- Django-website 程序案例系列-16 modle.form(表单验证)
案例程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Django-website 程序案例系列-18 多表跨表操作优化
详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化 在数据库有外键的时候,使用 select_related() 和 pref ...
- Django-website 程序案例系列-15 singnal分析
在django框架中singnal的应用相当于在你执行某些重要函数语句时在这条语句的前后放置两个预留的钩子,这两个钩子就是singnal,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...
- Django-website 程序案例系列-14 缓存的应用配置文件的写法
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...
- Django-website 程序案例系列-3 URL详解
django参考资料:http://docs.30c.org/djangobook2/index.html urls.py是django中控制接收前端的参数指定函数去执行逻辑 第一种 函数的方式 ur ...
随机推荐
- Android 百度sdk5.0定位
在开发中可能 会用到诸如“定位出当前所在城市,所在位置的经纬度”等功能.一次性的定位肯能定位不成功,可能经纬度未读出来,也可能是地址信息或者城市信息未读出来.此时就需对定位后拿到的信息做判断,加入没有 ...
- 画线函数Glib_Line算法的研究
在这里首先先简单把我对函数的功能的理解阐述一下,方便后面的分析:Glib_Line函数实现的功能是通过参数给定(x1,y1,x2,y2,color),来确定起点(x1,y1)和终点(x2,y2)两 ...
- Luogu3220 HNOI2012 与非 数位DP
传送门 题意:给出$N$个范围在$[0,2^k-1]$的整数,定义位运算$NAND$为位运算$AND$的逆运算,求$[L,R]$中有多少数能成为若干个前面给出的整数.若干括号和$NAND$运算组成的表 ...
- odoo11 添加自定义模块报错问题
在昨天解决了数据库管理页面布局混乱的问题之后,如何设置自己的custom_addons模块文件夹成了主要问题,建立自己的custom_addons文件夹,可以使用git命令来管理自己所写代码的版本了, ...
- bitcoin源码解析 - 交易 Transcation (一)
比特币中的交易可谓是比特币的最核心部分.比特币由交易产生,而区块就是用来存储交易的.所以,交易是比特币存在的载体,同时也是比特币中最复杂的部分.交易的运作层层相扣,各个部分缺一不可,十分严密,由此体现 ...
- 求组合数、求逆元、求阶乘 O(n)
在O(n)的时间内求组合数.求逆元.求阶乘.·.· #include <iostream> #include <cstdio> #define ll long long ;// ...
- 基于uFUN开发板的心率计（二）动态阈值算法获取心率值
前言 上一篇文章:基于uFUN开发板的心率计(一)DMA方式获取传感器数据,介绍了如何获取PulseSensor心率传感器的电压值,并对硬件电路进行了计算分析.心率计,重要的是要获取到心率值,本篇文章 ...
- html5录音支持pc和Android、ios部分浏览器，微信也是支持的，JavaScript getUserMedia
以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...
- Docker容器学习梳理 - 容器登陆方法梳理（attach、exec、nsenter）
对于运行在后台的Docker容器,我们运维人员时常是有登陆进去的需求.登陆Docker容器的方式:1)使用ssh登陆容器.这种方法需要在容器中启动sshd,存在开销和攻击面增大的问题.同时也违反了Do ...
- Python-列表-9
列表: Why: 我们现在已经学过的数据类型有:数字,布尔值,字符串,大家都知道数字主要用于计算,bool值主要是条件判断,只有字符串可以用于数据的存储,这些数据类型够用么?对于一门语言来说,肯定是不 ...