Heim > Artikel > Web-Frontend > Das Popup-Popup-Fenster muss ein Datenereignis hinzufügen (ausführliche Schritt-für-Schritt-Erklärung).

Das Popup-Popup-Fenster muss ein Datenereignis hinzufügen (ausführliche Schritt-für-Schritt-Erklärung).

php中世界最好的语言Original: 2018-04-16 14:12:313519Durchsuche

Dieses Mal zeige ich Ihnen die Popup-Popup-Box-Bindung zum Hinzufügen von Datenereignissen (ausführliche Schritt-für-Schritt-Erklärung: Was sind die Vorsichtsmaßnahmen für die Bindung der Popup-Popup-Box zum Hinzufügen). Das Folgende ist ein praktischer Fall.

Logik

Im Fenster P1 wird eine Reihe von Daten angezeigt und eine Schaltfläche zum Hinzufügen bereitgestellt.
Klicken Sie auf die Schaltfläche, um ein neues Browserfenster P2 zu öffnen. Nachdem Sie ein Datenelement hinzugefügt und übermittelt haben, wird Fenster P2 automatisch geschlossen.
Das neu hinzugefügte Fenster Daten werden dynamisch zum Fenster hinzugefügt und wurden in P1 ausgewählt
Erforderliche Kenntnisse: JS-Stücklisten-Fensterobjekt; JS selbstausführende Funktion

Leistung

Das Folgende ist eine einfache Implementierung in Django. Da es relativ einfach ist, werden Routing und Ansichten zusammen geschrieben.

1. Routing und Ansichtsteil

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. Rufen Sie die Ansicht p1 auf und kehren Sie zur Seite p1.html zurück:

<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>

Beschreibung:

1. Klicken Sie auf die Schaltfläche „Hinzufügen“ und führen Sie popupFunc aus: Besuchen Sie „/p2.html/“ und öffnen Sie die Seite p2.html in einem neuen Fenster
2. Definieren Sie die Callback-Funktion Callback: Sie erhält einen Parameter Stadt, fügen Sie es dynamisch zur Dropdown-Option hinzu und setzen Sie es auf den ausgewählten Bundesstaat.

3. p2.html wird im Popup-Fenster wie folgt angezeigt:

<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>

Hinweis: Der Parameter action=url des Formulars wird hier nicht angegeben. Nachdem der Benutzer die Daten eingegeben hat, werden sie standardmäßig an die aktuelle Adresse, dh „/p2.html/“, gesendet und an die Ansicht gesendet p2

4. Nachdem Ansicht p2 die übermittelten Daten empfangen hat, übergibt sie die Vorlage und gibt die Seite popup.html zurück:

<head>
 <meta charset="UTF-8">
 <title>正在返回</title>
</head>
<body>
<script>
 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")
</script>
</body>

Beschreibung:

Die selbstausführende JS-Funktion ist hier definiert: Sie ruft die Rückruffunktion in dem Fenster auf, das das Popup-Fenster öffnet (d. h. den Rückruf in P1), und übergibt die Benutzereingabedaten als Parameter, um sich selbst zu schließen.
Wenn die p2-Ansicht eine Fehlermeldung zurückgibt, kann diese auch in popup.html angezeigt werden (weggelassen).
Informationen zu selbstausführenden Funktionen finden Sie unter JavaScript Selbstausführende Funktionen und jQuery-Erweiterungsmethoden

Ich glaube, Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie selbstausführende JS-Funktionen und jQuery-Erweiterungen

Detaillierte Erläuterung der Verwendung von Require to call js

Detaillierte Erläuterung der Schritte zum Festlegen von Header-Informationen im Vue-Ressourcen-Interceptor

Das obige ist der detaillierte Inhalt vonDas Popup-Popup-Fenster muss ein Datenereignis hinzufügen (ausführliche Schritt-für-Schritt-Erklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript django jquery html Resource require 回调函数 JS 对象事件 bom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie selbstausführende JS-Funktionen und jQuery-ErweiterungenNächster Artikel：So verwenden Sie selbstausführende JS-Funktionen und jQuery-Erweiterungen

In Verbindung stehende Artikel

Mehr sehen