• Django:popup弹出框简单应用实例


    效果:在p1.html页面点击,弹出p2的弹出框,填写数据,在 popup_response页面处理数据

    1、url设置

    urlpatterns = patterns(
       url(r'^p1.html',views.p1),
       url(r'^p2.html', views.p2),
    ) 
    

      

    2、视图函数:views.py

    from django.shortcuts import render
    
    def p1(request):
        return render(request,"p1.html")
    
    def p2(request):
        if request.method == "GET":
            return render(request,"p2.html")
        elif request.method == "POST":
            city =request.POST.get("city")
            print(city)
            return render(request,"popup_response.html",{"city":city})
    

    3、前端页面及函数

    p1.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>P1页面</h1>
    <select name="" id="i1">
        <option value="">上海</option>
        <option value="">北京</option>
    </select>
    <input type="button" onclick="popupfunc()" value="点击弹出添加弹出框">
    
    <script>
        function popupfunc() {
            window.open("/p2.html","popup_page","status=1,height:500,600,toolbar=0,resizeable=0")
        }
    
    {#    alert("接收p2弹出框数据:"+data)#}
        function p1_receive_func(data) {
            var op = document.createElement("option");
            op.innerHTML = data;
            op.setAttribute("selected","selected");
            document.getElementById("i1").appendChild(op);
        }
    </script>
    </body>
    </html>
    

      

    p2.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <h1>这是P2页面</h1>
    <form method="post">
        {% csrf_token %}
        <input type="text" name="city">
        <input type="submit" value="提交">
    </form>
    
    </body>
    </html>
    

      

    popup_response.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正在返回</title>
    </head>
    <body>
    
    <script>
        (function () {
            var name ="{{ city }}";
            window.opener.p1_receive_func(name);
            window.close();
        })()
    </script>
    
    </body>
    </html>
    

      

      

  • 相关阅读:
    生成函数
    泰勒公式与牛顿迭代
    如何在浏览器关闭发送请求
    elment-ui table组件 -- 远程筛选排序
    微信小程序 -- 数据请求
    2019年 学习计划
    vue 表单校验(二)
    ubuntu 学习
    vue-cli如何添加多种环境变量
    vue兼容ie
  • 原文地址:https://www.cnblogs.com/hedeyong/p/7717840.html
Copyright © 2020-2023  润新知