팝업 팝업 상자는 데이터 이벤트를 추가하도록 바인딩되어 있습니다(자세한 단계별 설명).-JS 튜토리얼-php.cn

팝업 팝업 상자는 데이터 이벤트를 추가하도록 바인딩되어 있습니다(자세한 단계별 설명).

php中世界最好的语言

풀어 주다： 2018-04-16 14:12:31

원래의

3566명이 탐색했습니다.

이번에는 데이터 이벤트 추가를 위한 팝업 팝업 상자 바인딩을 가져왔습니다(자세한 단계별 설명). 데이터 이벤트 추가를 위한 팝업 팝업 상자 바인딩의 주의 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

Logic

데이터 세트가 창 P1에 표시되고 추가 버튼이 제공됩니다. 버튼을 클릭하면 새 브라우저 창 P2가 나타납니다. 데이터를 추가하고 제출하면 새로 추가된 데이터가 자동으로 닫힙니다.
필수 지식: JS BOM 창 객체

달성됨

다음은 Django에서의 간단한 구현입니다. 비교적 간단하기 때문에 라우팅과 뷰를 함께 작성합니다.

1. 라우팅 및 보기 부분

from django.conf.urls import url
from django.shortcuts import render
def p1(request):
 return render(request, 'p1.html')
def p2(request):
 if request.method == 'GET':
  return render(request, 'p2.html')
 elif request.method == 'POST':
  city = request.POST.get('city')
  print('执行数据保存操作...')
  return render(request, 'popup.html',{'city':city})
urlpatterns = [
 url(r'^p1.html/', p1),
 url(r'^p2.html/', 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('/p2.html/', 'p2', "status=1, height:300, width:300, toolbar=0, resizeable=1")
  //open(url, name, 窗口参数)，注意name不能重名
 };
 callback = function (city) {
  var opt = document.createElement('option');
  opt.innerText = city;
  opt.setAttribute('selected', 'selected');
  var selEle = document.getElementById('cityChoose');
  selEle.appendChild(opt);
 }
</script>
</body>

로그인 후 복사

설명:

1. 추가 버튼을 클릭하고 popupFunc를 실행합니다. '/p2.html/'을 방문하여 새 창에서 p2.html 페이지를 엽니다

콜백 함수
콜백을 정의합니다. 도시 매개변수를 받아 동적으로 추가합니다. 드롭다운 옵션을 선택하고 선택된 상태로 설정합니다. 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>

로그인 후 복사

설명:

p2 보기가
를 반환하는 경우 popup.html(생략)에도 표시될 수 있습니다.
자체 실행 함수는
자체 실행 함수 및 jQuery 확장 메서드