Django:popup弹出框简单应用实例
2017-10-24 15:21
876 查看
效果:在p1.html页面点击,弹出p2的弹出框,填写数据,在 popup_response页面处理数据
1、视图函数:views.py
2、前端页面及函数
p1.html
p2.html
popup_response.html
1、视图函数:views.py
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(city) return render(request,"popup_response.html",{"city":city}
2、前端页面及函数
p1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>P1页面</h1> <select name="" id="i1"> <option value="">上海</option> <option value="">北京</option> </select> <input type="button" onclick="p 4000 opupfunc()" value="点击弹出添加弹出框"> <script> function popupfunc() { window.open("/p2.html","popup_page","status=1,height:500,width:600,toolbar=0,resizeable=0") } {# alert("接收p2弹出框数据:"+data)#} function p1_receive_func(data) { var op = document.createElement("option"); op.innerHTML = data; op.setAttribute("selected","selected"); document.getElementById("i1").appendChild(op); } </script> </body> </html>
p2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>这是P2页面</h1> <form method="post"> {% csrf_token %} <input type="text" name="city"> <input type="submit" value="提交"> </form> </body> </html>
popup_response.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正在返回</title> </head> <body> <script> (function () { var name ="{{ city }}"; window.opener.p1_receive_func(name); window.close(); })() </script> </body> </html>
相关文章推荐
- Django:popup弹出框简单应用实例
- AJAX简单应用实例-弹出层
- AJAX简单应用实例-弹出层
- Vue框架中关于vue-lazyload的简单应用实例(学习笔记③)
- 毕业设计(十九)---文章模块管理 div弹出层的应用 简单js操作
- jquery简单实现点击弹出层效果实例
- storm简单应用实例之总结
- TabLayout,ViewPager(Fragment)的简单应用实例,以及RecyclerView所遭遇的问题
- JS实现简单的右下角弹出提示窗口完整实例
- shell应用编程-简单实例
- 创建node.js一个简单的应用实例
- simple-spa 一个简单的单页应用实例
- Perl 脚本简单应用实例-MySQL备份
- Android WIFI应用简单开发实例
- django ajax 应用实例
- WebSphere MQ Java 应用开发简单实例(上篇:客户端模式开发)(client mode和binding mode)
- 使用nRF51822/nRF51422创建一个简单的BLE应用 ---入门实例手册(中文)之二
- C#.net,remoting的简单应用实例
- Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
- iptable简单应用实例