效果:在p1.html頁面點擊,彈出p2的彈出框,填寫數據,在 popup_response頁面處理數據
1、url設置
urlpatterns = patterns( url(r'^p1.html',views.p1), url(r'^p2.html', views.p2), )
2、視圖函數: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})
3、前端頁面及函數
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="popupfunc()" 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>