效果：在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. Android 升级ADT到22第三方Jar包导致的ClassNotFoundException和NoClassDefFoundError异常解决

    在使用异步载入框架Android-Universal-Image-Loader的Jar包的时候遇到错误: java.lang.NoClassDefFoundError:com.nostra13.uni ...

  2. HttpClient如何 关闭连接（转）

    ava代码 HttpClient client = new HttpClient(); HttpMethod method = new GetMethod("http://www.apach ...

  3. 485. Max Consecutive Ones【easy】

    485. Max Consecutive Ones[easy] Given a binary array, find the maximum number of consecutive 1s in t ...

  4. 159. Find Minimum in Rotated Sorted Array 【medium】

    159. Find Minimum in Rotated Sorted Array [medium] Suppose a sorted array is rotated at some pivot u ...

  5. mac 火狐 下载 任何文件都是失败

    今天在从邮件中下载附件,怎么点击下载 浏览器上都是失败 最后突然想到,我改过火狐的下载路径,改到根目录下了,根目录下应该是没有权限保存文件的 后把下载路径改成 “下载” 就可以正常下载了

  6. nc在centos7上的安装和简单使用

    下载 http://vault.centos.org/6.6/os/x86_64/Packages/nc-1.84-22.el6.x86_64.rpm     rpm -iUv nc-1.84-22. ...

  7. 不再为无限级树结构烦恼,且看此篇s

    很久都没有写点什么出来分享了,最近在做多级树的时候,发现来来回回写过很多遍,于是封装成用户控件,以方便日后重复使用. 首先上效果: 我们看到以上2种效果,都是支持任意级的,这里源码中使用的是递归,以便 ...

  8. Office Web Apps Server 2013与PDF（一）

    好吧--这个消息有点旧,迟了将近4个月. Office Web Apps是微软各大服务产品系列中的一个基础服务,可以为SharePoint 2013.Exchange 2013.Lync 2013提供 ...

  9. bootstrap-table接合abp

    将ui-grid 换成了bootstrap-table, 在abp中如此结合 function ajaxRequest(params) { console.log(params.data); role ...

  10. 【Mac + Appium + Python3.6学习(三)】之IOS自动化测试环境配置

    在做这一节之前先配置我的另一篇文章所需要安装的前提准备条件:<[Mac + Appium学习(一)]之安装Appium环境前提准备> 一.安装IOS自动化测试环境 配置环境: Appium ...