Django之PopUp的具体实现方法


Posted in Python onAugust 31, 2019

步骤一: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的具体实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python的Django应用程序解决AJAX跨域访问问题的方法
May 31 Python
Python+django实现简单的文件上传
Aug 17 Python
Python线性拟合实现函数与用法示例
Dec 13 Python
详解Python爬取并下载《电影天堂》3千多部电影
Apr 26 Python
详细介绍pandas的DataFrame的append方法使用
Jul 31 Python
python 基于dlib库的人脸检测的实现
Nov 08 Python
Python assert关键字原理及实例解析
Dec 13 Python
python 解决tqdm模块不能单行显示的问题
Feb 19 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
Feb 26 Python
Python编程快速上手——强口令检测算法案例分析
Feb 29 Python
Python替换NumPy数组中大于某个值的所有元素实例
Jun 08 Python
Python matplotlib绘制雷达图
Apr 13 Python
对django layer弹窗组件的使用详解
Aug 31 #Python
python2.7实现复制大量文件及文件夹资料
Aug 31 #Python
python3实现高效的端口扫描
Aug 31 #Python
python nmap实现端口扫描器教程
May 28 #Python
Python3多线程版TCP端口扫描器
Aug 31 #Python
简单了解python协程的相关知识
Aug 31 #Python
利用rest framework搭建Django API过程解析
Aug 31 #Python
You might like
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python绘制双柱形图代码实例
2017/12/14 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
解决Python3下map函数的显示问题
2019/12/04 Python
浅析Python __name__ 是什么
2020/07/07 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
什么是类的返射机制
2016/02/06 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
新闻发布会策划方案
2014/06/12 职场文书
学年个人总结范文
2015/03/05 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA