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新手入门最容易犯的错误总结
Apr 24 Python
浅谈Python在pycharm中的调试(debug)
Nov 29 Python
Python按钮的响应事件详解
Mar 04 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
Mar 11 Python
python使用celery实现异步任务执行的例子
Aug 28 Python
python3中numpy函数tile的用法详解
Dec 04 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
Dec 31 Python
关于Tensorflow 模型持久化详解
Feb 12 Python
如何在mac版pycharm选择python版本
Jul 21 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
Oct 19 Python
Python Tkinter实例——模拟掷骰子
Oct 24 Python
图神经网络GNN算法
May 11 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
美术教师岗位职责
2014/03/18 职场文书
高老头读书笔记
2015/06/30 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
全网非常详细的pytest配置文件
2022/07/15 Python