效果：在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. JAVA 利用SimpleDateFormat将String转换为格式化的日期

    1. /** * 使用用户格式提取字符串日期 * * @param strDate 日期字符串 * @param pattern 日期格式 * @return */ public static Dat ...

  2. nginx的luajit安装luarocks并安装luafilesystem

    nginx的luajit安装luarocks并安装luafilesystem by admin on -- :: in , 69次 标题有点绕口.我尽量把关键词都贴进去.之前因为自己的nginx安装了 ...

  3. 使用VS2015 时 报LNK1104 找不到exe.manifest 的解决方法

    一般都是由于工程配置文件导致的错误,暴力方法: 直接用文本工具打开.vcxproj文件.搜索AdditionalManifestFiles ,然后根据当前工程目录进行更改

  4. 通过Java发射机制调用可变参数函数

    1.获取可变参数的函数       获取可变参数的函数与获取参数类型为数组类型一样. clazz.getMethod("test", Object[].class);    其中O ...

  5. RocketMQ 消息队列单机部署及使用

    转载请注明来源:http://blog.csdn.net/loongshawn/article/details/51086876 相关文章: <RocketMQ 消息队列单机部署及使用> ...

  6. PHP递归实现无限级分类

    在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...

  7. NIPS2016 best paper: Value Iteration Networks 解析

    论文介绍ppt:https://pan.baidu.com/s/1gfDURyb Tamar, Aviv, et al. "Value iteration networks." A ...

  8. myeclipse中文编码错误，没有GBK选项

    默认编码是UTF-8,但是导入GBK工程后,直接改为ISO-8859-1,但是还是编码错误. 用网上的: 全局编码设置:编码设置的方法:ToolBar-->Window-->Prefere ...

  9. db2 blob EMPTY_BLOB()

    --针对BLOG类型的列,写入一个0长度的字符串

  10. KnockOut 绑定之foreach绑定（mvc+knockout）

    什么时候使用foreach绑定 foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候, ...