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 陷阱 window全局对象
Nov 26 Javascript
javascript 写类方式之五
Jul 05 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
Vue通过input筛选数据
Oct 26 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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完整的日历类(CLASS)
2006/11/27 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
学校爱国卫生月活动总结
2014/06/25 职场文书
专业见习报告范文
2014/11/03 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
红色影片观后感
2015/06/18 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
使用MybatisPlus打印sql语句
2022/04/22 SQL Server