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 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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代码
2006/12/06 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
理解javascript正则表达式
2016/03/08 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python 自定义对象的打印方法
2019/01/12 Python
使用python实现滑动验证码功能
2019/08/05 Python
美国电视购物:QVC
2017/02/06 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
土地转让协议书范本
2014/04/15 职场文书
员工福利申请报告
2015/05/15 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
董事长助理工作总结2015
2015/07/23 职场文书