popup方法：

一、创建一个页面

1.创建url和视图函数：：

from django.shortcuts import render

def p1(request):

    return render(request,'p1.html')

urlpatterns = [

    url(r'^nb/', v1.site.urls),

    url(r'^p1/', p1)]

2.创建HTML：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>P1页面</h1>

<input type="button" value="按钮" onclick="popupFunc();" />

<script>

    function popupFunc(){

        window.open('http://www.baidu.com', 'asdfadf',"status=1, height:200, width:200, toolbar=0, resizeable=0")

    }   

</script>

</body>

</html>

上述代码中：

  • asdfadf是命名；

  • status=1, height:200, width:200, toolbar=0, resizeable=0"是弹窗的窗口参数

执行效果如下图所示：

二、需求

根据上述的需求这里代码需要做相应的修改：

1.url和视图函数：

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":

        from app01 import models

        obj = models.UserGroup.objects.create(title=request.POST.get('city'))

        return render(request,'popup_response.html',{'obj':obj})

urlpatterns = [

    url(r'^nb/', v1.site.urls),

    url(r'^p1/', p1),

    url(r'^p2/', p2)]

2.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>

p1页面的HTML页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>P1页面</h1>

    <select id="i1">

        <option>上海</option>

        <option>北京</option>

    </select>

    <input type="button" value="添加" onclick="popupFunc();" />

<script>

    function popupFunc(){

        window.open('/p2/', 'asdfadf',"status=1, height:200, width:200, toolbar=0, resizeable=0")

    }

    function fooo(name){

        var op = document.createElement('option');

        op.innerHTML = name;

        op.setAttribute('selected','selected');

        document.getElementById('i1').appendChild(op);

    }

</script>

</body>

</html>

popup_response的HTML页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>正在传输</title>

</head>

<body>

<script>

    (function() {

       var name = "{{ obj.title }}" ;

        window.opener.fooo(name);

        window.close();

    })()

</script>

</body>

</html>

执行效果如下图：

下面是整个代码的执行过程的图示：

popup方法的更多相关文章

  1. WDA基础十五:POPUP WINDOW

    1.组件控制器定义属性: 2.实现popup方法: METHOD stock_popup . DATA: l_cmp_api TYPE REF TO if_wd_component, l_window ...

  2. Wscript的popup

    Dim WSHShell Set WSHShell = WScript.CreateObject("WScript.Shell") WshSHell.popup "枚举主 ...

  3. Leaflet：Event与Layer类属性、方法

    Event 之所以要说Event,是因为很多类都是继承自Layer--Marker.Popup.Tooltip.Path以及继承自Path的Circle.Polyline.Polygon...:而La ...

  4. VBScript: Windows脚本宿主介绍

    Windows脚本宿主(Windows Script Host, WSH)是一个Windows管理工具.WSH创建了一个脚本运行的主环境,WSH使脚本能够使用对象和服务,并提供脚本执行的准则.WSH还 ...

  5. JavaScrtip之JS最佳实践

    一.JavaScript之平稳退化 这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例: JavaScript使用window对象的open()方法来创建新的浏览器窗口; window.op ...

  6. 地址四级联动的vue组件

    一.效果图如下: 二.思路 主要在vue中结合 mint-ui组件的Picker和Popup方法,负责对json地址进行展示: 三.代码地址 四.说明 address4.json最好是在点击父组件的地 ...

  7. Java应用程序使用系统托盘资源

    要想使自己开发的Java SE项目运行在自己的电脑系统托盘上,这并不是什么难事,总共需要如下几步即可: 1.线判断一下,系统托盘是否可用,否则接下来的程序将不可避免的报出异常咯 2.获得一个Syste ...

  8. 【Unity编辑器】UnityEditor多重弹出窗体与编辑器窗口层级管理

    一.简介 最近马三为公司开发了一款触发器编辑器,对于这个编辑器策划所要求的质量很高,是模仿暴雪的那个触发器编辑器来做的,而且之后这款编辑器要作为公司内部的一个通用工具链使用.其实,在这款触发器编辑器之 ...

  9. Leaflet API翻译

    转自: http://jsrookie.iteye.com/blog/2318972(上) http://jsrookie.iteye.com/blog/2318973(下) L.Map API各种类 ...

随机推荐

  1. 201521123033《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...

  2. 201521123033《Java程序设计》第2周学习总结

    1. 本周学习总结 answer:(1)学会用码云存储代码,并下载代码. (2)学会在java中使用函数,使代码更精炼. 2. 书面作业 Q1.使用Eclipse关联jdk源代码,并查看String对 ...

  3. 201521123031 《Java程序设计》第一周学习总结

    1. 本周学习总结 a.使用notepad++和eclipse编写程序b.对jav的运行环境jdk.jre有了初步的认识c.学习如何使用码云代码库 2. 书面作业 Q1.为什么java程序可以跨平台运 ...

  4. 201521123038 《Java程序设计》 第十周学习总结

    201521123038 <Java程序设计> 第十周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题 ...

  5. java：数组操作工具类 java.util.Arrays包 主要方法详解

    Arrays类位于Java.util包下,是一个对数组操作的工具类,现将Arrays类中的方法做一个总结(JDK版本:1.6.0_34).Arrays类中的方法可以分为八类: sort(对数组排序) ...

  6. javascript：12种JavaScript MVC框架之比较

    Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...

  7. javascript中slice() splice() concat()操作数组的方法

    这三个操作数组,哪个返回一个新数组呢.上代码 splice()方法,用于插入,删除和替换. var arr=[1,2,3,4,5]; var arr1=arr.splice(1,3); console ...

  8. 个人理解---在开发中何时加入日志记录功能[java]

    是这样的:俩个月前做的一个小功能,今天经理突然问我这个'清除复投记录'功能是不是我做的,我说是,很久以前了.他说昨天一个客户找过来了,后台把人家的复投记录清除掉了,不知道何时清除的,我记得当时做的时候 ...

  9. jz2440重新分区

    在购买开发板的时候,板子上已经烧写好了bootloader.内核和文件系统.但是在具体使用时,发现板子上划分的内核分区只有2M,但是我编译出来的内核大于2M,于是将内核烧写到nandflash上面时会 ...

  10. 【实验吧】Reverse400

    在网上下载,pyinstxtractor.py,对Reverse400.exe进行反汇编 得到其源代码为 $ cat Revesre03 data = \ "\x1c\x7a\x16\x77 ...