Popup弹出框绑定添加数据事件（步奏详解）
这次给大家带来Popup弹出框绑定添加数据事件（步奏详解），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扩展方法
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是Popup弹出框绑定添加数据事件（步奏详解）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
使用ddrescue在Linux上恢复数据
Mar 20, 2024 pm 01:37 PM
DDREASE是一种用于从文件或块设备(如硬盘、SSD、RAM磁盘、CD、DVD和USB存储设备)恢复数据的工具。它将数据从一个块设备复制到另一个块设备，留下损坏的数据块，只移动好的数据块。ddreasue是一种强大的恢复工具，完全自动化，因为它在恢复操作期间不需要任何干扰。此外，由于有了ddasue地图文件，它可以随时停止和恢复。DDREASE的其他主要功能如下：它不会覆盖恢复的数据，但会在迭代恢复的情况下填补空白。但是，如果指示工具显式执行此操作，则可以将其截断。将数据从多个文件或块恢复到单
开源！超越ZoeDepth！ DepthFM：快速且精确的单目深度估计！
Apr 03, 2024 pm 12:04 PM
0.这篇文章干了啥？提出了DepthFM：一个多功能且快速的最先进的生成式单目深度估计模型。除了传统的深度估计任务外，DepthFM还展示了在深度修复等下游任务中的最先进能力。DepthFM效率高，可以在少数推理步骤内合成深度图。下面一起来阅读一下这项工作~1.论文信息标题：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr
如何多条件使用Excel过滤功能
Feb 26, 2024 am 10:19 AM
如果您需要了解如何在Excel中使用具有多个条件的筛选功能，以下教程将指导您完成相应步骤，确保您可以有效地对数据进行筛选和排序。Excel的筛选功能是非常强大的，能够帮助您从大量数据中提取所需的信息。这个功能可以根据您设定的条件，过滤数据并只显示符合条件的部分，让数据的管理变得更加高效。通过使用筛选功能，您可以快速找到目标数据，节省了查找和整理数据的时间。这个功能不仅可以应用在简单的数据列表上，还可以根据多个条件进行筛选，帮助您更精准地定位所需信息。总的来说，Excel的筛选功能是一个非常实用的
米家怎么添加电视
Mar 25, 2024 pm 05:00 PM
很多用户们在现代生活中越来越青睐小米智能家居互联的电子生态，那么连接米家APP后，你就可以轻松用手机来控制连接设备，但是很多用户们还不知如何将自己的家居添加米家app中，那么这篇教程攻略就将为大家带来具体连接方法步骤攻略，希望能帮助到各位有需要的小伙伴们。1、下载米家APP后，创建或者登录小米账户。2、添加方法：当全新的设备通电后，将手机靠近设备并打开小米电视，正常情况下会弹出连接提示，选择“确定”即进入设备连接流程。若无提示弹出，也可以手动添加设备，方法是：进入智能家庭APP后，点击左下方第1
谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理训练最快选择
Apr 01, 2024 pm 07:46 PM
谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow，7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中，Pytorch依然比Tensorflow更受欢迎。但未来，也许有更多的大模型会基于JAX平台进行训练和运行。模型最近，Keras团队为三个后端（TensorFlow、JAX、PyTorch）与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先，他们为生成式和非生成式人工智能任务选择了一组主流
iPhone上的蜂窝数据互联网速度慢：修复
May 03, 2024 pm 09:01 PM
在iPhone上面临滞后，缓慢的移动数据连接？通常，手机上蜂窝互联网的强度取决于几个因素，例如区域、蜂窝网络类型、漫游类型等。您可以采取一些措施来获得更快、更可靠的蜂窝互联网连接。修复1–强制重启iPhone有时，强制重启设备只会重置许多内容，包括蜂窝网络连接。步骤1–只需按一次音量调高键并松开即可。接下来，按降低音量键并再次释放它。步骤2–该过程的下一部分是按住右侧的按钮。让iPhone完成重启。启用蜂窝数据并检查网络速度。再次检查修复2–更改数据模式虽然5G提供了更好的网络速度，但在信号较弱
超级智能体生命力觉醒！可自我更新的AI来了，妈妈再也不用担心数据瓶颈难题
Apr 29, 2024 pm 06:55 PM
哭死啊，全球狂炼大模型，一互联网的数据不够用，根本不够用。训练模型搞得跟《饥饿游戏》似的，全球AI研究者，都在苦恼怎么才能喂饱这群数据大胃王。尤其在多模态任务中，这一问题尤为突出。一筹莫展之际，来自人大系的初创团队，用自家的新模型，率先在国内把“模型生成数据自己喂自己”变成了现实。而且还是理解侧和生成侧双管齐下，两侧都能生成高质量、多模态的新数据，对模型本身进行数据反哺。模型是啥？中关村论坛上刚刚露面的多模态大模型Awaker1.0。团队是谁？智子引擎。由人大高瓴人工智能学院博士生高一钊创立，高
美国空军高调展示首个AI战斗机！部长亲自试驾全程未干预，10万行代码试飞21次
May 07, 2024 pm 05:00 PM
最近，军事圈被这个消息刷屏了：美军的战斗机，已经能由AI完成全自动空战了。是的，就在最近，美军的AI战斗机首次公开，揭开了神秘面纱。这架战斗机的全名是可变稳定性飞行模拟器测试飞机（VISTA），由美空军部长亲自搭乘，模拟了一对一的空战。5月2日，美国空军部长FrankKendall在Edwards空军基地驾驶X-62AVISTA升空注意，在一小时的飞行中，所有飞行动作都由AI自主完成！Kendall表示——在过去的几十年中，我们一直在思考自主空对空作战的无限潜力，但它始终显得遥不可及。然而如今，
