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编程中用close()方法关闭文件的教程
May 24 Python
从源码解析Python的Flask框架中request对象的用法
Jun 02 Python
Python处理json字符串转化为字典的简单实现
Jul 07 Python
Python程序中设置HTTP代理
Nov 06 Python
Django如何自定义分页
Sep 25 Python
python之cv2与图像的载入、显示和保存实例
Dec 05 Python
Python面向对象思想与应用入门教程【类与对象】
Apr 12 Python
详解python中的线程与线程池
May 10 Python
python删除文件夹下相同文件和无法打开的图片
Jul 16 Python
对Python 中矩阵或者数组相减的法则详解
Aug 26 Python
Python中Subprocess的不同函数解析
Dec 10 Python
Python中的turtle画箭头,矩形,五角星
Mar 16 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
新52大事件
2020/03/03 欧美动漫
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
jquery 选择器部分整理
2009/10/28 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
javascript数组的使用
2013/03/28 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
javascript实现计算器功能
2020/03/30 Javascript
实例讲解React 组件
2020/07/07 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python编程实现蚁群算法详解
2017/11/13 Python
pycham查看程序执行的时间方法
2018/11/29 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
班组长的岗位职责
2013/12/09 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
函授本科自我鉴定
2014/02/04 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
SQL SERVER存储过程用法详解
2022/02/24 SQL Server