效果：在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. Mysql备份工具比较

    Mysql备份工具比较 大 | 中 | 小 [ 2012/12/25 12:10 | by Sonic ] 1. 使用automysqlbackup http://sourceforge.net/pr ...

  2. angularjs 可以加入html标签方法------ng-bind-html的用法总结（1）

    本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: n ...

  3. tuple 元组

    创建单元素tuple tuple和list一样,可以包含 0 个.1个和任意多个元素. 包含多个元素的 tuple,前面我们已经创建过了. 包含 0 个元素的 tuple,也就是空tuple,直接用 ...

  4. PLSQL快捷键设置

    1.在PL/SQL Developer中编写sql语句时,如果无法自动提示字段那是一件痛苦的事情,工作效率又低,在此演示下如何在PL/SQL Developer工具中自动提示字段,让开发者省时又省心, ...

  5. Java进阶03 IO基础（转载）

    IO示例 下面是演示的文件file.txt Hello World! Hello Nerd! 先来研究一个文件读取的例子: import java.io.*;public class Test{ pu ...

  6. 第一百九十二节，jQuery EasyUI 使用

    jQuery EasyUI 使用 学习要点: 1.引入必要的文件 2.加载 UI 组件的方式 3.使用 easyload.js 智能加载 4.Parser 解析器 本节课重点了解 EasyUI 的两种 ...

  7. Spring4 MVC ContentNegotiatingViewResolver多种输出格式实例

    本文演示支持多种输出格式,这里 Spring4 MVC应用程序使用了 Spring ContentNegotiatingViewResolver .我们将生成应用程序输出XML,JSON,PDF,XL ...

  8. diamond源码阅读-循环探测配置信息是否变化rotateCheckConfigInfo

    rotateCheckConfigInfo 这是一个定时任务,循环调用 /** * 循环探测配置信息是否变化,如果变化,则再次向DiamondServer请求获取对应的配置信息 */ private ...

  9. iOS --随机打乱一个数组的顺序 获得一个新的数组

    NSArray* arr = @[@"1",@"2",@"3"]; arr = [arr sortedArrayUsingComparato ...

  10. iOS 集成阿里百川最新版（3.1.1.96） 实现淘宝授权登录以及调用淘宝客户端商品详情页

      公司最近要做第三方登录,由于是做导购项目,必不可少的有淘宝的授权登录.本来就是一个授权登录,没什么大不了的.但淘宝的无线开放业务——阿里百川更新的最新版本3.1.1.96,开发文档不是不详细,是很 ...