效果：在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,width: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>

　　

　　

Django：popup弹出框简单应用实例的更多相关文章

  1. 【ABAP系列】SAP ABAP POPUP弹出框自建内容

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP POPUP弹出框自 ...

  2. pentaho cde popup弹出框口

    弹出窗口在pentaho cde里面相对比较容易,不过还是记录一下,以防时间久了,忘记关键参数. 先看一下效果图: 画出自己想要在弹出框展示的图形,把他的HtmlObject设置成弹出窗口,如图: 然 ...

  3. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  4. popOver 弹出框简单使用

    1.仿QQ弹出框 1.1用到的知识点 1.1.1如何调整弹出框的大小(这里弹出的也是控制器) 这里已经有讲解过http://blog.csdn.net/iostiannan/article/detai ...

  5. WindowsPhone模拟简易Toast弹出框

    Coding4Fun这个开源控件中有ToastPrompt这个弹出框组件,但是由于Coding4Fun太庞大,如果只用到ToastPrompt这个控件的话,整个引用不太值当的.于是自己写了一个差不多的 ...

  6. 弹出框优化实例（alert和confirm）

    在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...

  7. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  8. Selenium2学习-040-JavaScript弹出框（alert、confirm、prompt）操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  9. 弹出框JBox实例

    前几天做的考试系统的一些后台弹出框的一些模板.主要是因为普通的弹出框样式不是很好,颜色也不能调换.这里我们用的是JBox,还是从师傅那得知的.自己小实验了下,这里就做个小结. JBox 插件说明 - ...

随机推荐

  1. nginx+python+fastcgi环境配置(flup版本)

    昨天花了一整天的时间研究搭建了nginx+python+fastcgi环境,并测试没问题,由于是第一次,并且参考了网上很多东西,网上也有很多,但还是把自己的过程记录下. 主要感谢这位兄弟的文章给了我很 ...

  2. Java进阶03 IO基础（转载）

    IO示例 下面是演示的文件file.txt Hello World! Hello Nerd! 先来研究一个文件读取的例子: import java.io.*;public class Test{ pu ...

  3. 【转】Monkey测试6-Monkey Test Log

    Moneky Test Log 分析: 首先用一个最简单的例子分析:monkey --pct-trackball 0 --throttle 100 -v 500/*p参数: 表示指定测试的程序/*v参 ...

  4. Cocos2dx 场景切换动画

    1.http://www.cnblogs.com/linux-ios/archive/2013/04/09/3009292.html

  5. python 案例：使用BeautifuSoup4的爬虫

    我们以腾讯社招页面来做演示:http://hr.tencent.com/position.php?&start=10#a 使用BeautifuSoup4解析器,将招聘网页上的职位名称.职位类别 ...

  6. cobbler 更换dns和dhcp服务器为dnsmasq

    1) 需要配置/etc/cobbler/module.conf, 把manage_dns和manage_dhcp改为manage_dnsmasq 2) 重启cobbler和dnsmasq服务,dnsm ...

  7. js的一些技巧总结

    1.  将彻底屏蔽鼠标右键 <body oncontextmenu="return false"> ''''' </body> 或者 <table b ...

  8. mac os 10.10.4 上安装mysql5.6.26

    在 Mac 系统上, 安装 MySQL Server 通常是用 DMG 包在图形化界面下按提示安装, 此外 MySQL 还提供了 Compressed TAR Archive 二进制包安装方式, 即免 ...

  9. Java-iBATIS

    1.是什么? 2010年迁移到了google code,并且改名为MyBatis.ibatis1.ibatis2.到了版本3就改名为mybatis. iBATIS的是一个持久层框架,它能够自动在 Ja ...

  10. ios -解决view遮挡按钮问题

    #pragma mark -解决view遮挡按钮问题 //分享按钮赋予 self 最顶部 / web按钮赋予 self 最顶部 / showBtn显示按钮 self 最顶部 / scrollviews ...