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 程序案例系列-1 CSRF

Django-website 程序案例系列-8 分页

Django-website 程序案例系列-6 html模板文件详解

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

Django-website 程序案例系列-4 ORM数据库操作

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