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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
javascript编程起步(第三课)
Feb 27 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
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
程序员编程十条戒律
2009/07/09 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
初学Python实用技巧两则
2014/08/29 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python开发入门——列表生成式
2020/09/03 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
会计专业自荐信范文
2019/05/22 职场文书
2019财务转正述职报告
2019/06/27 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python