Django实现PopUp弹窗及数据回传完整教程

Django PopUp弹窗实现步骤

首先，在index页面中设置触发弹窗的入口。页面包含一个用于显示回传内容的容器div，以及一个带有onclick事件的链接。点击链接时调用punch函数，该函数用于打开指定URL的弹窗窗口。

<!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>

接下来，在Django项目的urls.py中配置相关路由。需要定义index路径指向首页视图，以及pop路径指向处理弹窗数据的视图，确保前端请求能正确路由到对应的后端处理逻辑。

urlpatterns = [
  path('admin/', admin.site.urls),
  path('index/', views.index),
  path('pop/', views.pop),
]

在views.py中编写视图函数。index视图负责渲染首页模板。pop视图需区分请求方法：GET请求时渲染弹窗表单页面；POST请求时获取用户提交的content字段，并将其传递给结果页面进行渲染。

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})

前端需要构建一个用于弹窗的表单页面test2.html。该页面包含一个POST表单，内含csrf_token保护、文本输入框以及提交按钮。用户在此页面输入内容并提交后，数据将发送至后端处理。

<!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>

处理完数据后，后端返回test3.html页面。该页面包含一段自执行JavaScript函数。函数首先调用父窗口的callbackns方法，将后端传来的text参数传递回去，随后立即关闭当前弹窗窗口，实现数据回传与窗口关闭的一体化操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正在关闭...</title>
</head>
<body>
<script>

  (function () {
    opener.callbackns("{{ text }}");
    window.close()
  })()

</script>
</body>
</html>

最后，在index页面的JavaScript中定义callbackns函数。该函数接收弹窗回传的文字参数，并更新index页面中id为hhh的div元素的文本内容，从而完成整个弹窗交互闭环。

function callbackns(text) {
  document.getElementById('hhh').innerText = text
 }

以上即为Django中实现PopUp弹窗及数据回传的具体步骤。通过合理配置路由、视图及前端脚本，可实现流畅的跨窗口数据交互体验。