Django之PopUp的具体实现方法

来源：jb51　　时间：2019/9/2 9:38:26　　对本文有异议

步骤一：index页面处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
</head>
<body>
<div id="hhh">hello</div>
<a href="" onclick=" rel="external nofollow" punch('/pop/')">点我点我</a>
</body>
<script>
  function punch(url) {
    window.open(url,url,"status=1,width:500,height:600,toolbar=0,resizeable=0")
  }
  function callbackns(text) {
    document.getElementById('hhh').innerText = text
  }
</script>
</html>

步骤二：配置路由

urlpatterns = [
  path('admin/', admin.site.urls),
  path('index/', views.index),
  path('pop/', views.pop),
]

步骤三：视图函数

from django.shortcuts import render
 
 
# Create your views here.
def index(request):
  """
  :param request:
  :return:
  """
  return render(request, 'test1.html')
 
 
def pop(request):
  """
  :param request:
  :return:
  """
  if request.method == 'GET':
    return render(request, 'test2.html')
  else:
    text = request.POST.get('content')
 
    return render(request, 'test3.html', {'text': text})

步骤四：构建一个前端页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pop页面</title>
</head>
<body>
<form action="" method="post">
  {% csrf_token %}
  <input type="text" name="content">
  <input type="submit" value="提交">
</form>
</body>
</html>

步骤五：自执行函数处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正在关闭...</title>
</head>
<body>
<script>
 
  (function () {
    opener.callbackns("{{ text }}");
    window.close()
  })()
 
</script>
</body>
</html>

步骤六：关闭当前窗口并执行

function callbackns(text) {
  document.getElementById('hhh').innerText = text
 }

以上这篇Django之PopUp的具体实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持w3xue。

友情链接：直通硅谷　点职佳　北美留学生论坛

Django热门文章

django-rest-framework 自定义swagger过程详解

前后端分离实现注册+登录（Vue3.0 + Django3.2)

详解Django CAS 解决方案

python+Django实现防止SQL注入的办法

django 配置阿里云OSS存储media文件的例子

【django-vue】封装logger 封装全局异常封装response 数据库配置用户表继承AbstractUser配置

django使用ckeditor上传图片

Django集成富文本编辑器summernote的实现步骤

使用django和vue进行数据交互的方法步骤

python3.8+django2+celery5.2.7环境准备(python测试开发django)

Django推荐文章

探索Django：从项目创建到图片上传的全方位指南

Django国际化与本地化指南

CentOS+Django+uWSGI+Celery+Supervisor配置

vue3 + element-plus 的 upload + axios + django 文件上传并保存

Django学习(三) 之模板中标签的使用

前后端分离实现注册+登录（Vue3.0 + Django3.2)

Django笔记三十二之session登录验证操作

Django笔记三十之log日志记录详解

【django-vue】封装logger 封装全局异常封装response 数据库配置用户表继承AbstractUser配置

Luffy项目：2、项目需求（2），项目库的创建，软件开发目录，Django配置文件介绍