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 setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
js表头排序实现方法
Jan 16 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php判断目录存在的简单方法
2019/09/26 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jQuery操作cookie
2016/08/08 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python如何求解两数的最大公约数
2018/09/27 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
办公室人员先进事迹
2014/01/27 职场文书
欢迎领导检查标语
2014/06/27 职场文书
先进党员事迹材料
2014/12/24 职场文书
幼师自荐信范文
2015/03/06 职场文书
承诺书范本大全
2015/05/04 职场文书