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

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

php中世界最好的语言
php中世界最好的语言원래의
2018-04-16 14:12:313554검색

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.