简单实现Popup弹出框添加数据
生活随笔
收集整理的這篇文章主要介紹了
简单实现Popup弹出框添加数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
邏輯
實現
下面在Django中簡單實現下，因為比較簡單，路由和視圖就寫在一起了。
路由和視圖部分
from django.conf.urls import url from django.shortcuts import renderdef 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), ]訪問視圖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>說明：
彈出窗口中顯示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
視圖p2收到提交的數據后，傳入模板并返回頁面popup.html：
<head><meta charset="UTF-8"><title>正在返回</title> </head> <body> <script>(function (city) {window.opener.callback(city);window.close();})("{{ city }}")</script> </body>說明：
總結
以上是生活随笔為你收集整理的简单实现Popup弹出框添加数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第七讲 SCCM2012部署Endpoi
- 下一篇： 2013ACM暑假集训总结-致将走上大三