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 模态对话框实现提交数据的更多相关文章

  1. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  2. Django-website 程序案例系列-12 CSRF

    django为用户实现防止跨站请求伪造的功能 需要配置settings.py:  django.middleware.csrf.CsrfViewMiddleware 1. form表单提交 <f ...

  3. Django-website 程序案例系列-6 ajax案例

    普通ajax案例: views.py def testajax(request): h = request.POST.get('hostname') #拿到ajax传来的值 i = request.P ...

  4. Django-website 程序案例系列-17 forms表单验证的字段解释

    1.Django内置字段如下: Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial ...

  5. Django-website 程序案例系列-16 modle.form(表单验证)

    案例程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. Django-website 程序案例系列-18 多表跨表操作优化

    详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化 在数据库有外键的时候,使用 select_related() 和 pref ...

  7. Django-website 程序案例系列-15 singnal分析

    在django框架中singnal的应用相当于在你执行某些重要函数语句时在这条语句的前后放置两个预留的钩子,这两个钩子就是singnal,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...

  8. Django-website 程序案例系列-14 缓存的应用配置文件的写法

    由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...

  9. Django-website 程序案例系列-3 URL详解

    django参考资料:http://docs.30c.org/djangobook2/index.html urls.py是django中控制接收前端的参数指定函数去执行逻辑 第一种 函数的方式 ur ...

随机推荐

  1. easyui datagrid JS加载样式 表头乱

    解决方案,找了下资料,加一个遮罩层,提升用户体验. <script type="text/javascript"> var width = document.docum ...

  2. GIT 管理修改、删除文件

    管理修改 现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行,这就 ...

  3. 每个大主播都是满屏弹幕，怎么做到的？Python实战无限刷弹幕！

    anmu 是一个开源的直播平台弹幕接口,使用他没什么基础的你也可以轻松的操作各平台弹幕.使用不到三十行代码,你就可以使用Python基于弹幕进一步开发.支持斗鱼.熊猫.战旗.全民.Bilibili多平 ...

  4. 9、链表 & 状态机 & 多线程

    链表的引入 从数组的缺陷说起 数组有2个缺陷:一个是数组中所有元素的类型必须一致:第二个是数组的元素个数必须事先制定并且一旦指定之后不能更改. 如何解决数组的2个缺陷:数组的第一个缺陷靠结构体去解决. ...

  5. LOJ2687 BOI2013 Vim 线头DP

    传送门 多图警告!!! 一种很新奇的\(DP\),全网似乎只有一两篇题解-- 首先,序列中的一段\(e\)等价于在跳的过程中这一段\(e\)之后的一个字符必须要经过,并且在最后的答案中加上$2 \ti ...

  6. Luogu4219 BJOI2014 大融合 LCT

    传送门 题意:写一个数据结构,支持图上连边(保证图是森林)和询问一条边两端的连通块大小的乘积.$\text{点数.询问数} \leq 10^5$ 图上连边,$LCT$跑不掉 支持子树$size$有点麻 ...

  7. Luogu P2059 [JLOI2013]卡牌游戏

    一道比较简单的概率DP 首先看到这种题目和数据范围,就要毫不犹豫地列DP方程: 我们令\(f_{i,j}\)表示还剩下i个人时编号为j的人的胜率,那么首先我们可以知道边界条件\(f_{1,1}=1\) ...

  8. [转][南京米联ZYNQ深入浅出]第二季更新完毕课程共计16节课

    [南京米联]ZYNQ第二季更新完毕课程共计16节课 [第二季ZYNQ]                                                                  ...

  9. R语言学习 第十篇：包

    包(Package)是实现特定功能的.预先写好的代码库(library),通俗地说,包是含有函数.数据等的功能模块.R拥有大量的软件包,许多包都是由某一领域的专家编写的,但并不是所有的包都有很高的质量 ...

  10. curator 分布式锁InterProcessMutex

    写这篇文章的目的主要是为了记录下自己在zookeeper 锁上踩过的坑,以及踩坑之后自己的一点认识; 从zk分布式锁原理说起,原理很简单,大家也应该都知道,简单的说就是zookeeper实现分布式锁是 ...