效果：在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. Codeforces #310ACase of Matryoshkas（模拟）

    [题目链接]click here~~ [题目大意]给你n个玩具,规定仅仅能小的玩具套在大的上面.并且是规格依次递增的,比方:1->2->3,求全部玩具套完须要的最小时间花费 [解题思路]: ...

  2. obj-fit

    该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框. 初始值 fill 适用于 替换元素 遗传 是 媒体 视觉 计算值 按规定 动画类型 离散的 为了规范 ...

  3. NetBeans 设置界面语言

    我就懒得吐槽TNND你就不能让用户自己选择语言?这SB中文翻译我也是醉了,尽是误导人 下面的例子用jMonkeyEngine SDK的设置为例子(本质上就是NetBeans) 英文设置: 中文设置:

  4. Java基础05 实施接口（转载）

    经过封装,产品隐藏了内部细节,只提供给用户接口(interface). 接口是非常有用的概念,可以辅助我们的抽象思考.在现实生活中,当我们想起某个用具的时候,往往想到的是该用具的功能性接口.比如杯子, ...

  5. <head> 或 <body> 中的 JavaScript

    您可以在 HTML 文档中放入不限数量的脚本. 脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中. 通常的做法是把函数放入 <h ...

  6. LoadRunner 测试java代码

    LR12 JDK 1.7,32位 环境变量配好 待测的java jar包及其依赖的jar包都整理好,放在jdk的lib目录下,也要把jar包放在脚本目录下! =====>新建Java Vuser ...

  7. Android开发：《Gradle Recipes for Android》阅读笔记(翻译)2.2——将Eclipse开发的项目导入到AndroidStudio

    问题: 你想要将一个Eclipse ADT项目导入到Android Studio中. 解决方案: Android Studio提供了一个导入向导,可以重写已有的项目. 详细: 在Android Stu ...

  8. Docker学习（2Docker基本命令 ）

    1.首先我们需要明确在docker中需要了解的一些基础知识 Docker虚拟化有三个概念需要理解,分别镜像.容器.仓库. 1) 镜像:docker的镜像其实就是模板,跟我们常见的ISO镜像类似,是一个 ...

  9. 二、docker入门

    docker入门 使用场景: 面向产品.面向开发.面向测试.面向运维.面向自动化.面向微服务.面向大规模的分布式架构(微信红包) 虚拟化解决方案: 商业解决方案: VMware vSphere,VMw ...

  10. RTSP安防摄像机（海康大华宇视等）如何推送到RTMP流媒体服务器进行直播

    方案介绍 目前互联网直播的CDN和标准RTMP流媒体服务器通常只能接收RTMP格式的音视频推流.目前市场上有一些自带RTMP推流的摄像机和编码器,可以直接在其rtmp推流配置里面配置推送到RTMP流媒 ...