Popup弹出框添加数据实现方法


Posted in Javascript onOctober 27, 2017

本文实例为大家分享了Popup弹出框添加数据的具体代码,供大家参考,具体内容如下

逻辑

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

实现

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

1.路由和视图部分

from django.conf.urls import 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':
  city = request.POST.get('city')
  print('执行数据保存操作...')
  return render(request, 'popup.html',{'city':city})

urlpatterns = [
 url(r'^p1.html/', p1),
 url(r'^p2.html/', p2),
]

2.访问视图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>

说明:

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

3.弹出窗口中显示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

4.视图p2收到提交的数据后,传入模板并返回页面popup.html:

<head>
 <meta charset="UTF-8">
 <title>正在返回</title>
</head>
<body>
<script>

 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")

</script>
</body>

说明:

  • 这里定义了JS自执行函数:它调用打开弹出窗口的窗口中的回调函数(即P1中的callback),并把用户输入数据作为参数传入;关闭自身。
  • 如果p2视图返回错误信息,也可以在popup.html中作显示(略)。
  • 自执行函数可以参考 JavaScript 自执行函数和 jQuery扩展方法

效果图:

Popup弹出框添加数据实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 #Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 #Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 #Javascript
vue中的event bus非父子组件通信解析
Oct 27 #Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 #Javascript
webpack配置之后端渲染详解
Oct 26 #Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP反向代理类代码
2014/08/15 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
毕业生求职推荐信
2013/11/04 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
创业融资计划书
2014/04/25 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
农业项目合作意向书
2015/05/08 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript