Django之PopUp的具体实现方法

步骤一：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的具体实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Popup弹出框添加数据实现方法

    Popup弹出框添加数据实现方法

    本文实例为大家分享了Popup弹出框添加数据的具体代码,供大家参考,具体内容如下 逻辑 窗口P1中显示一组数据,并提供一个添加按钮 点击按钮,弹出新的浏览器窗口P2,在其中添加一条数据并提交后,窗口P2自动关闭 新添加数据动态添加到窗口P1中并被选中 所需知识:JS BOM 窗口对象:JS自执行函数 实现 下面在Django中简单实现下,因为比较简单,路由和视图就写在一起了. 1.路由和视图部分 from django.conf.urls import url from django.short

  • Django之PopUp的具体实现方法

    步骤一:index页面处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <div id="hhh">hello</div> <a href="" oncli

  • 浅谈django model的get和filter方法的区别(必看篇)

    django的get和filter方法是django model常用到的,搞清楚两者的区别非常重要. 为了说明它们两者的区别定义2个models class Student(models.Model): name = models.CharField('姓名', max_length=20, default='') age = models.CharField('年龄', max_length=20, default='') class Book(models.Model): student =

  • Python使用django获取用户IP地址的方法

    本文实例讲述了Python使用django获取用户IP地址的方法.分享给大家供大家参考.具体如下: 函数实现: def get_client_ip(request): try: real_ip = request.META['HTTP_X_FORWARDED_FOR'] regip = real_ip.split(",")[0] except: try: regip = request.META['REMOTE_ADDR'] except: regip = "" r

  • Django imgareaselect手动剪切头像实现方法

    本文实例讲述了Django imgareaselect手动剪切头像的方法.分享给大家供大家参考.具体如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传图片</title> </head> <body> <form action="." method="

  • Python中使用django form表单验证的方法

    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <div> <for

  • Django在Ubuntu14.04的部署方法

    第一步. sudo apt-get update sudo apt-get upgrade 先更新.. Django的主流部署方式:nginx+uwsgi+django 第二步,安装nginx sudo apt-get install nginx 安装nginx,如果需要安装最新的nginx需从官网下载源码包进行手动编译. nginx的大致文件结构. 1.配置文件:/etc/nginx 2.程序:/usr/sbin/nginx 3.日志:/var/log/nginx/access.log - e

  • Django实现简单分页功能的方法详解

    本文实例讲述了Django实现简单分页功能的方法.分享给大家供大家参考,具体如下: 使用django的第三方模块django-pure-pagination 安装模块: pip install django-pure-pagination 将'pure_pagination'添加到settings.py文件中 INSTALLED_APPS = ( ... 'pure_pagination', ) 在view.py文件中 from django.shortcuts import render ro

  • Django基于ORM操作数据库的方法详解

    Django基于ORM操作数据库的方法详解

    本文实例讲述了Django基于ORM操作数据库的方法.分享给大家供大家参考,具体如下: 1.配置数据库 vim settings #HelloWorld/HelloWorld目录下 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', #mysql数据库中第一个库test 'NAME': 'test', 'USER': 'root', 'PASSWORD': '123456', 'HOST':'127.0.0.1', '

  • Python Django给admin添加Action的方法实例详解

    Python Django给admin添加Action的方法实例详解

    在使用Django自带的admin后台的时候,他提供了一些默认的指令可以对数据进行操作, 比如批量删除,修改等 同样的我们也可以添加自己的指令. 创建一个Django项目 $ django-admin startproject DjangoActions $ cd DjangoActions $ python3 manage.py startapp mysite添加model 打开mysite下的models.py from django.db import models class Artic

  • django manage.py扩展自定义命令方法

    # django manage.py扩展自定义命令 环境: mac django1.10.3 在实际的项目开发过程中,我们可能要执行某脚本初始化数据库,可能要启动多个服务,比如启动celery,redis等.要是直接执行python mange.py celery/redis那该多方便啊!,能把这些命令整合到django框架的manage.py中吗? 示例-初始化数据 通过执行python manage.py initdata命令初始化数据,执行此命令后,调用某数据初始化脚本文件,进行数据初始化

随机推荐