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内置的字符串处理函数整理
Jan 29 Python
python解决字典中的值是列表问题的方法
Mar 04 Python
python开发之文件操作用法实例
Nov 13 Python
python编写简单爬虫资料汇总
Mar 22 Python
Python使用Mechanize模块编写爬虫的要点解析
Mar 31 Python
详解Python中的内建函数,可迭代对象,迭代器
Apr 29 Python
对django 模型 unique together的示例讲解
Aug 06 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
Aug 28 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
Feb 27 Python
PyTorch中的C++扩展实现
Apr 02 Python
Python Dataframe常见索引方式详解
May 27 Python
Pycharm 如何一键加引号的方法步骤
Feb 05 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
杏林同学录(七)
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue cli安装使用less的教程详解
2019/07/12 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python实现从wind导入数据
2019/12/03 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
高中学生干部学习的自我评价
2014/02/21 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
大学运动会加油稿
2015/07/22 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
react 路由Link配置详解
2021/11/11 Javascript