效果：在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. Tomcat闲聊

    上面是Tomcat的执行过程. 下面说几个概念: 1.JSP:这个就是在html文件中嵌入Java代码之后重新生成的一个文件(.jsp的文件) 2.servlet:就是一个处理动态资源的小程序,一般位 ...

  2. php 结合md5的加密，解密方法

    php 结合md5的加密,解密方法 张映 发表于 2012-06-28 分类目录: php 标签:md5, php 最近在整理代码发现了一个不错的东西,结合md5的加解密算法.网上关于php结合md5 ...

  3. 李洪强iOS开发之OC[004] - OC和C的差异的学习

  4. jvm参数设置和性能调优

    1.Java虚拟机运行时的数据区 2.常用的内存区域调节参数 -Xms:初始堆大小,默认为物理内存的1/64(<1GB):默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40% ...

  5. GCD XOR UVA 12716 找规律 给定一个n，找多少对(a,b)满足1<=b<=a<=n,gcd(a,b)=a^b；

    /** 题目:GCD XOR UVA 12716 链接:https://vjudge.net/problem/UVA-12716 题意:给定一个n,找多少对(a,b)满足1<=b<=a&l ...

  6. plsql programming 12 集合(忽略, 个人感觉用不到)

    关联数组, 嵌套表, varray 个人并不推荐使用集合, 因为操作有别于普通字段. 集合中每一个元素的数据类型都是相同的, 因此这些元素都是同质的(同质元素) 这一章的内容先忽略吧, 因为个人感觉用 ...

  7. html 常用

    1. var canvas = document.getElementById("tutorial"); var ctx = canvas.getContext("2d& ...

  8. TP view中跳转到某个控制器

    #直接用 __MODULE__/控制器名/方法名/参数名/参数 <a href="__MODULE__/Product/list_table/goods_id/<?php ech ...

  9. Theano mnist数据集格式

    首先链接一篇大牛的Theano文档翻译:http://www.cnblogs.com/xueliangliu/archive/2013/04/03/2997437.html 里面有mnist.pkl. ...

  10. git commit --amend用法

    提交信息很长时间内会一直保留在你的代码库(code base)中,所以你肯定希望通过这个信息正确地了解代码修改情况. 下面这个命令可以让你编辑最近一次的提交信息,但是你必须确保没有对当前的代码库(wo ...