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

php中世界最好的语言
풀어 주다: 2018-04-16 14:12:31
원래의
3550명이 탐색했습니다.

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

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 페이지를 엽니다

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 확장 메서드

  • 를 참조할 수 있습니다. 이 기사의 사례를 읽은 후 메서드를 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 주의하세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!

추천 도서:

JS 자체 실행 기능 및 jQuery 확장 사용 방법


js 호출 사용에 대한 자세한 설명 필요

vue-resource 인터셉터 헤더 정보 설정 단계에 대한 자세한 설명


위 내용은 팝업 팝업 상자는 데이터 이벤트를 추가하도록 바인딩되어 있습니다(자세한 단계별 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿