Heim >Web-Frontend >js-Tutorial >Informationen zum Popup-Popup-Fenster zum Hinzufügen einer Datenimplementierungsmethode

Informationen zum Popup-Popup-Fenster zum Hinzufügen einer Datenimplementierungsmethode

小云云Original: 2018-01-02 09:59:362060Durchsuche

Dieser Artikel stellt hauptsächlich die einfache Implementierungsmethode zum Hinzufügen von Daten zum Popup-Fenster vor. Ich hoffe, dass er allen helfen kann.

Logik

Ein Datensatz wird im Fenster P1 angezeigt und eine Schaltfläche „Hinzufügen“ ist vorhanden.
Klicken Sie auf die Schaltfläche, um ein neues Browserfenster P2 zu öffnen. Fügen Sie darin ein Element hinzu. Nachdem die Daten übermittelt wurden, wird Fenster P2 automatisch geschlossen.
Neu hinzugefügte Daten werden dynamisch zu Fenster P1 hinzugefügt und ausgewählt.
Erforderliche Kenntnisse: JS-Stücklisten-Fensterobjekt; JS selbstausführende Funktion

Implementierung

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, &#39;p1.html&#39;)

def p2(request):
 if request.method == &#39;GET&#39;:
  return render(request, &#39;p2.html&#39;)

 elif request.method == &#39;POST&#39;:
  city = request.POST.get(&#39;city&#39;)
  print(&#39;执行数据保存操作...&#39;)
  return render(request, &#39;popup.html&#39;,{&#39;city&#39;:city})

urlpatterns = [
 url(r&#39;^p1.html/&#39;, p1),
 url(r&#39;^p2.html/&#39;, 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(&#39;/p2.html/&#39;, &#39;p2&#39;, "status=1, height:300, width:300, toolbar=0, resizeable=1")
  //open(url, name, 窗口参数)，注意name不能重名
 };

 callback = function (city) {
  var opt = document.createElement(&#39;option&#39;);
  opt.innerText = city;
  opt.setAttribute(&#39;selected&#39;, &#39;selected&#39;);
  var selEle = document.getElementById(&#39;cityChoose&#39;);
  selEle.appendChild(opt);
 }
</script>
</body>

Anleitung:

1. Klicken Sie auf die Schaltfläche „Hinzufügen“, um popupFunc auszuführen: Besuchen Sie „/p2.html/“ und öffnen Sie die Seite p2.html in einem neuen Fenster
2. Definieren Sie die Callback-Funktion: Sie empfängt einen Parameter city, fügt ihn dynamisch zur Dropdown-Option hinzu und setzt ihn auf den ausgewählten Status.

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 action=url-Parameter des Formulars Das Formular wird hier nicht angegeben, und der Benutzer gibt die Daten nach der Übermittlung ein. Sie werden standardmäßig an die aktuelle Adresse gesendet, d. h. „/p2.html/“, und an die Ansicht p2 gesendet

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>

Erklärung:

Die selbstausführende JS-Funktion ist hier definiert: Sie ruft die Rückruffunktion in dem Fenster auf, das das Popup-Fenster öffnet (d. h. Rückruf in P1), und übergibt Benutzereingabedaten als Parameter und schließt sich selbst.
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 Selbstausführende JavaScript-Funktionen und jQuery-Erweiterungsmethoden

Rendering:

Verwandte Empfehlungen:

So verwenden Sie JQuery zum Schreiben eines Anmelde-Popup-Felds

jQuery-Pop -up-Seitenfeld und implementieren Sie die Datei des Popup-Felds. Detaillierte Erläuterung des Upload-Funktionscodes

Empfohlene 10 Popup-Feldeffekte (Sammlung)

Das obige ist der detaillierte Inhalt vonInformationen zum Popup-Popup-Fenster zum Hinzufügen einer Datenimplementierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript django jquery html 回调函数 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：Selbstausführende JavaScript-Funktionen und jQuery-ErweiterungsmethodenNächster Artikel：Selbstausführende JavaScript-Funktionen und jQuery-Erweiterungsmethoden

In Verbindung stehende Artikel

Mehr sehen