popup方法：
一、创建一个页面
1.创建url和视图函数：：
from django.shortcuts import render
def p1(request):
return render(request,'p1.html')
urlpatterns = [
url(r'^nb/', v1.site.urls),
url(r'^p1/', p1)]
2.创建HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>P1页面</h1>
<input type="button" value="按钮" onclick="popupFunc();" />
<script>
function popupFunc(){
window.open('http://www.baidu.com', 'asdfadf',"status=1, height:200, 200, toolbar=0, resizeable=0")
}
</script>
</body>
</html>
上述代码中：
-
asdfadf是命名；
-
status=1, height:200, 200, toolbar=0, resizeable=0"是弹窗的窗口参数
执行效果如下图所示：
二、需求
根据上述的需求这里代码需要做相应的修改：
1.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":
from app01 import models
obj = models.UserGroup.objects.create(title=request.POST.get('city'))
return render(request,'popup_response.html',{'obj':obj})
urlpatterns = [
url(r'^nb/', v1.site.urls),
url(r'^p1/', p1),
url(r'^p2/', p2)]
2.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>
p1页面的HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>P1页面</h1>
<select id="i1">
<option>上海</option>
<option>北京</option>
</select>
<input type="button" value="添加" onclick="popupFunc();" />
<script>
function popupFunc(){
window.open('/p2/', 'asdfadf',"status=1, height:200, 200, toolbar=0, resizeable=0")
}
function fooo(name){
var op = document.createElement('option');
op.innerHTML = name;
op.setAttribute('selected','selected');
document.getElementById('i1').appendChild(op);
}
</script>
</body>
</html>
popup_response的HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正在传输</title>
</head>
<body>
<script>
(function() {
var name = "{{ obj.title }}" ;
window.opener.fooo(name);
window.close();
})()
</script>
</body>
</html>
执行效果如下图：
下面是整个代码的执行过程的图示：
