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数据类型_字符串常用操作(详解)
May 30 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
Sep 08 Python
python3.5 tkinter实现页面跳转
Jan 30 Python
python opencv3实现人脸识别(windows)
May 25 Python
Python 给某个文件名添加时间戳的方法
Oct 16 Python
查看端口并杀进程python脚本代码
Dec 17 Python
Keras之自定义损失(loss)函数用法说明
Jun 10 Python
Python requests接口测试实现代码
Sep 08 Python
Python操控mysql批量插入数据的实现方法
Oct 27 Python
Python绘制数码晶体管日期
Feb 19 Python
只需要这一行代码就能让python计算速度提高十倍
May 24 Python
Python 中的Sympy详细使用
Aug 07 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
数字转英文
2006/12/06 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php json转换相关知识(小结)
2018/12/21 PHP
设定php简写功能的方法
2019/11/28 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
Javascript Object.extend
2010/05/18 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
小区消防演习方案
2014/02/21 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL