이번에는 데이터 이벤트 추가를 위한 팝업 팝업 상자 바인딩을 가져왔습니다(자세한 단계별 설명). 데이터 이벤트 추가를 위한 팝업 팝업 상자 바인딩의 주의 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.
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 자체 실행 기능 및 jQuery 확장 사용 방법js 호출 사용에 대한 자세한 설명 필요vue-resource 인터셉터 헤더 정보 설정 단계에 대한 자세한 설명위 내용은 팝업 팝업 상자는 데이터 이벤트를 추가하도록 바인딩되어 있습니다(자세한 단계별 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!