집 > 기사 > 웹 프론트엔드 > 팝업 팝업박스 추가 데이터 구현 방법에 대해

팝업 팝업박스 추가 데이터 구현 방법에 대해

小云云원래의: 2018-01-02 09:59:362037검색

이 글은 팝업 팝업 상자에 데이터를 추가하는 간단한 구현 방법을 주로 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

Logic

P1창에 일련의 데이터가 표시되고 추가 버튼이 제공됩니다.
버튼을 클릭하면 P2라는 새 브라우저 창이 팝업됩니다. 데이터를 추가하고 제출하면 P2창이 자동으로 닫힙니다.
새로 추가된 데이터 다이나믹스 창 P1에 추가되고 선택됨
필수 지식: JS BOM 창 개체; JS 자체 실행 기능

implementation

다음은 Django에서 구현한 간단한 내용입니다. 라우팅 및 뷰가 비교적 간단하기 때문입니다. 함께 쓰여있습니다.

1. 라우팅 및 보기 부분

from django.conf.urls import url
from django.shortcuts import render


def p1(request):
 return render(request, &#39;p1.html&#39;)

def p2(request):
 if request.method == &#39;GET&#39;:
  return render(request, &#39;p2.html&#39;)

 elif request.method == &#39;POST&#39;:
  city = request.POST.get(&#39;city&#39;)
  print(&#39;执行数据保存操作...&#39;)
  return render(request, &#39;popup.html&#39;,{&#39;city&#39;:city})

urlpatterns = [
 url(r&#39;^p1.html/&#39;, p1),
 url(r&#39;^p2.html/&#39;, p2),
]

2. 보기 p1을 방문하고 페이지 p1.html로 돌아갑니다.

<head>
 <meta charset="UTF-8">
 <title>p1页面</title>
</head>

<body>
<h2>p1页面</h2>

<select id="cityChoose">
 <option>上海</option>
 <option>北京</option>
</select>
<input type="button" value="添加" onclick="popupFunc();"/>

<script>
 popupFunc = function () {
  window.open(&#39;/p2.html/&#39;, &#39;p2&#39;, "status=1, height:300, width:300, toolbar=0, resizeable=1")
  //open(url, name, 窗口参数)，注意name不能重名
 };

 callback = function (city) {
  var opt = document.createElement(&#39;option&#39;);
  opt.innerText = city;
  opt.setAttribute(&#39;selected&#39;, &#39;selected&#39;);
  var selEle = document.getElementById(&#39;cityChoose&#39;);
  selEle.appendChild(opt);
 }
</script>
</body>

지침:

1. p2.html/'을 클릭하고 새 창에서 p2.html 페이지를 엽니다.
2. 콜백 함수 콜백을 정의합니다. 도시 매개변수를 받아 이를 드롭다운 옵션에 동적으로 추가하고 선택한 상태로 설정합니다.

3.p2.html은 다음과 같이 팝업 창에 표시됩니다.

<head>
 <meta charset="UTF-8">
 <title>p2页面</title>
</head>
<body>
<h2>p2页面</h2>

<form method="post">
 {% csrf_token %}
 <input type="text" name="city">
 <input type="submit" value="提交">
</form>
</body>

참고: 양식 양식의 action=url 매개변수는 여기에 지정되지 않습니다. 기본적으로 현재 주소, 즉 '/p2.html/'에 제출되어 p2

4 보기에 제출됩니다. 보기 p2가 제출된 데이터를 받은 후 템플릿을 전달하고 popup.html 페이지를 반환합니다.

<head>
 <meta charset="UTF-8">
 <title>正在返回</title>
</head>
<body>
<script>

 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")

</script>
</body>

설명:

JS 자체 실행 함수는 여기에 정의되어 있습니다. 팝업 창을 여는 창에서 콜백 함수(즉, P1의 콜백)를 호출하고 사용자에게 전달합니다. 매개변수로 입력 데이터가 닫힙니다.
p2 보기에서 오류 메시지가 반환되는 경우 popup.html(생략)에도 표시될 수 있습니다.
자체 실행 기능은 JavaScript 자체 실행 기능과 jQuery 확장 메서드를 참고하세요

렌더링:

팝업 팝업박스 추가 데이터 구현 방법에 대해

관련 기사