效果：在p1.html页面点击，弹出p2的弹出框，填写数据，在 popup_response页面处理数据

1、url设置

  1. urlpatterns = patterns(
  2.    url(r'^p1.html',views.p1),
  3.    url(r'^p2.html', views.p2),
  4. )

　　

2、视图函数：views.py

  1. from django.shortcuts import render
  2.  
  3. def p1(request):
  4.     return render(request,"p1.html")
  5.  
  6. def p2(request):
  7.     if request.method == "GET":
  8.         return render(request,"p2.html")
  9.     elif request.method == "POST":
  10.         city =request.POST.get("city")
  11.         print(city)
  12.         return render(request,"popup_response.html",{"city":city})

3、前端页面及函数

p1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>P1页面</h1>
  9. <select name="" id="i1">
  10.     <option value="">上海</option>
  11.     <option value="">北京</option>
  12. </select>
  13. <input type="button" onclick="popupfunc()" value="点击弹出添加弹出框">
  14.  
  15. <script>
  16.     function popupfunc() {
  17.         window.open("/p2.html","popup_page","status=1,height:500,width:600,toolbar=0,resizeable=0")
  18.     }
  19.  
  20. {#    alert("接收p2弹出框数据:"+data)#}
  21.     function p1_receive_func(data) {
  22.         var op = document.createElement("option");
  23.         op.innerHTML = data;
  24.         op.setAttribute("selected","selected");
  25.         document.getElementById("i1").appendChild(op);
  26.     }
  27. </script>
  28. </body>
  29. </html>

　　

p2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <h1>这是P2页面</h1>
  10. <form method="post">
  11.     {% csrf_token %}
  12.     <input type="text" name="city">
  13.     <input type="submit" value="提交">
  14. </form>
  15.  
  16. </body>
  17. </html>

　　

popup_response.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>正在返回</title>
  6. </head>
  7. <body>
  8.  
  9. <script>
  10.     (function () {
  11.         var name ="{{ city }}";
  12.         window.opener.p1_receive_func(name);
  13.         window.close();
  14.     })()
  15. </script>
  16.  
  17. </body>
  18. </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. redhat5.8下oracle11g启动失败

    # redhat5.8下oracle11g启动失败 ### 日志文件路径-----------------------------tail -f /u01/app/oracle/product/11. ...

  2. GitBlit （1）-- 在linux 安装 GitBlit 并运行

    Git是一款注重速度.数据完整性.分布式支持和非线性工作流的分布式版本控制工具.Git最初由Linus Torvalds在2005年为Linux内核开发而设计,如今已经成为被广泛接受的版本控制系统. ...

  3. Fragment嵌套Fragment实现的Tab导航

    要实现的效果就是底部导航,具体到每一个Fragment又在上部设置一个导航条,分成两个Fragment实现.效果图是: 首先给出activity的layout: <android.support ...

  4. Hibernate每个具体类一张表映射(使用注释）

    在每个类创建一张表的情况下, 表中不使用Null值的列. 这种方法的缺点是在子类表中创建了重复的列. 在这里,我们需要在父类中使用@Inheritance(strategy = Inheritance ...

  5. java中.currentTimeMillis的用法和含义

    用法:可以用法获取当前时间的毫秒数,可以通过毫秒数进行时间比较,时间转化以及时间格式化等.public class SystemTime {public static void main(String ...

  6. linux oracle配置开机启动

    参考:http://jingyan.baidu.com/article/b2c186c8fe4306c46ef6ff16.html 先以root身份登录到linux系统, 1. 修改vi /etc/o ...

  7. 一个改动配置文件的linux shell script

    不久以前,以前搜到一篇博客是读取配置文件的,http://www.cnblogs.com/bo083/archive/2012/11/19/2777076.html,用到如今,感觉十分方便.感谢作者. ...

  8. Unity3D学习笔记——NGUI之UISlider

    UISlider:用于创建简单的滑动块和进度条,并且可以添加一个拇指按钮. 效果图如下: 一:使用步骤 1.从上面的效果看出,这个工具由四部分组成:背景图,进度图,进度lable显示,拇指按钮. 2. ...

  9. go语言递归创建目录

    import ( "fmt" "os" ) func main() { //创建C:/temp/log文件夹 // err := os.MkdirAll(&qu ...

  10. Python简单分布式爬虫

    分布式爬虫采用主从模式.主从模式是指由一台主机作为控制节点,负责管理所有运行网络爬虫的主机(url管理器,数据存储器,控制调度器),爬虫只需要从控制节点哪里接收任务,并把新生成任务提交给控制节点.此次 ...