逻辑

窗口P1中显示一组数据，并提供一个添加按钮
点击按钮，弹出新的浏览器窗口P2，在其中添加一条数据并提交后，窗口P2自动关闭
新添加数据动态添加到窗口P1中并被选中
所需知识：JS BOM 窗口对象；JS自执行函数

实现

下面在Django中简单实现下，因为比较简单，路由和视图就写在一起了。

路由和视图部分

from django.conf.urls import url
from django.shortcuts import renderdef 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('执行数据保存操作...')return render(request, 'popup.html',{'city':city})urlpatterns = [url(r'^p1.html/', p1),url(r'^p2.html/', p2),
]

访问视图p1，返回页面p1.html：

<head><meta charset="UTF-8"><title>p1页面</title>
</head><body>
<h2>p1页面</h2><select id="cityChoose"><option>上海</option><option>北京</option>
</select>
<input type="button" value="添加" onclick="popupFunc();"/><script>popupFunc = function () {window.open('/p2.html/', 'p2', "status=1, height:300, width:300, toolbar=0, resizeable=1")//open(url, name, 窗口参数)，注意name不能重名};callback = function (city) {var opt = document.createElement('option');opt.innerText = city;opt.setAttribute('selected', 'selected');var selEle = document.getElementById('cityChoose');selEle.appendChild(opt);}
</script>
</body>

说明：

点击添加按钮，执行popupFunc：访问'/p2.html/'，并在新窗口中打开页面p2.html
定义回调函数callback：它接收一个参数city，将其动态添加到下拉选项中并设置为选中状态。

弹出窗口中显示p2.html如下：

<head><meta charset="UTF-8"><title>p2页面</title>
</head>
<body>
<h2>p2页面</h2><form method="post">{% csrf_token %}<input type="text" name="city"><input type="submit" value="提交">
</form>
</body>

说明：这里没有指定form表单的action=url参数，用户输入数据后，默认提交到当前地址，即'/p2.html/'，提交到视图p2

视图p2收到提交的数据后，传入模板并返回页面popup.html：
```
<head><meta charset="UTF-8"><title>正在返回</title>
</head>
<body>
<script>(function (city) {window.opener.callback(city);window.close();})("{{ city }}")</script>
</body>
```
说明：
1. 这里定义了JS自执行函数：它调用打开弹出窗口的窗口中的回调函数（即P1中的callback），并把用户输入数据作为参数传入；关闭自身。
2. 如果p2视图返回错误信息，也可以在popup.html中作显示（略）。
3. 自执行函数可以参考 JavaScript 自执行函数和 jQuery扩展方法
效果图：

简单实现Popup弹出框添加数据相关推荐

popup弹出html页面,Popup弹出框绑定添加数据事件（步奏详解）
这次给大家带来Popup弹出框绑定添加数据事件(步奏详解),Popup弹出框绑定添加数据事件的注意事项有哪些,下面就是实战案例,一起来看一下. 逻辑窗口P1中显示一组数据,并提供一个添加按钮点击按 ...
OpenLayers基础教程——popup弹出框
1.前言在OpenLayers中,一般使用ol.Overlay实现popup弹出框,弹出框一般用于显示地图上兴趣点的一些属性信息,如下图所示.下面开始介绍实现方法. 2.准备测试数据在SqlSer ...
WPF----＞自定义控件添加Popup弹出框
自定义控件,当点击自定义控件时弹出提示框文章目录重要属性普通使用自定义控件使用Popup 参考文档重要属性属性名称解释使用方法 PlacementTarget 安置目标 Popup附 ...
easyUI中dialog弹出框中数据加载不出来
在前端使用easyUI开发的过程中遇到一个奇怪的问题,easyUI中的dialog中的combobox数据有时加载不出来,或者是一些文字也有时加载不出来,后来发现,dialog每次关闭并不会销毁原di ...
android 弹窗有边框_Android 多种简单的弹出框样式设置代码
简介这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 特性 1.使用链式开发代码简洁明了 2.所有的弹出框样 ...
android开发自动提示框,Android 多种简单的弹出框样式设置代码
简介这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 项目地址:http://www.easck.com/j ...
Android 多种简单的弹出框样式设置
简介这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 项目地址:https://github.com/Liu ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇
为弹出框(Popup)添加"关闭(×)"按钮如弹出框结构代码所示,关闭按钮标示"×"是放置在一div中的.使其具有关闭整个弹出框的功能,只要在创建该div时, ...

简单实现Popup弹出框添加数据

逻辑

实现

简单实现Popup弹出框添加数据相关推荐

最新文章

热门文章