1. 程式人生 > 程式設計 >Django之PopUp的具體實現方法

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的具體實現方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。