Heim Web-Frontend js-Tutorial 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).

Apr 16, 2018 pm 02:12 PM
数据 添加

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),
]
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verwenden Sie ddrescue, um Daten unter Linux wiederherzustellen Verwenden Sie ddrescue, um Daten unter Linux wiederherzustellen Mar 20, 2024 pm 01:37 PM

DDREASE ist ein Tool zum Wiederherstellen von Daten von Datei- oder Blockgeräten wie Festplatten, SSDs, RAM-Disks, CDs, DVDs und USB-Speichergeräten. Es kopiert Daten von einem Blockgerät auf ein anderes, wobei beschädigte Blöcke zurückbleiben und nur gute Blöcke verschoben werden. ddreasue ist ein leistungsstarkes Wiederherstellungstool, das vollständig automatisiert ist, da es während der Wiederherstellungsvorgänge keine Unterbrechungen erfordert. Darüber hinaus kann es dank der ddasue-Map-Datei jederzeit gestoppt und fortgesetzt werden. Weitere wichtige Funktionen von DDREASE sind: Es überschreibt die wiederhergestellten Daten nicht, füllt aber die Lücken im Falle einer iterativen Wiederherstellung. Es kann jedoch gekürzt werden, wenn das Tool explizit dazu aufgefordert wird. Stellen Sie Daten aus mehreren Dateien oder Blöcken in einer einzigen wieder her

Open Source! Jenseits von ZoeDepth! DepthFM: Schnelle und genaue monokulare Tiefenschätzung! Open Source! Jenseits von ZoeDepth! DepthFM: Schnelle und genaue monokulare Tiefenschätzung! Apr 03, 2024 pm 12:04 PM

0.Was bewirkt dieser Artikel? Wir schlagen DepthFM vor: ein vielseitiges und schnelles generatives monokulares Tiefenschätzungsmodell auf dem neuesten Stand der Technik. Zusätzlich zu herkömmlichen Tiefenschätzungsaufgaben demonstriert DepthFM auch hochmoderne Fähigkeiten bei nachgelagerten Aufgaben wie dem Tiefen-Inpainting. DepthFM ist effizient und kann Tiefenkarten innerhalb weniger Inferenzschritte synthetisieren. Lassen Sie uns diese Arbeit gemeinsam lesen ~ 1. Titel der Papierinformationen: DepthFM: FastMonocularDepthEstimationwithFlowMatching Autor: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr

So verwenden Sie die Excel-Filterfunktion mit mehreren Bedingungen So verwenden Sie die Excel-Filterfunktion mit mehreren Bedingungen Feb 26, 2024 am 10:19 AM

Wenn Sie wissen müssen, wie Sie die Filterung mit mehreren Kriterien in Excel verwenden, führt Sie das folgende Tutorial durch die Schritte, um sicherzustellen, dass Sie Ihre Daten effektiv filtern und sortieren können. Die Filterfunktion von Excel ist sehr leistungsstark und kann Ihnen dabei helfen, aus großen Datenmengen die benötigten Informationen zu extrahieren. Diese Funktion kann Daten entsprechend den von Ihnen festgelegten Bedingungen filtern und nur die Teile anzeigen, die die Bedingungen erfüllen, wodurch die Datenverwaltung effizienter wird. Mithilfe der Filterfunktion können Sie Zieldaten schnell finden und so Zeit beim Suchen und Organisieren von Daten sparen. Diese Funktion kann nicht nur auf einfache Datenlisten angewendet werden, sondern auch nach mehreren Bedingungen gefiltert werden, um Ihnen dabei zu helfen, die benötigten Informationen genauer zu finden. Insgesamt ist die Filterfunktion von Excel sehr praktisch

So fügen Sie einen Fernseher zu Mijia hinzu So fügen Sie einen Fernseher zu Mijia hinzu Mar 25, 2024 pm 05:00 PM

Viele Benutzer bevorzugen im modernen Leben zunehmend das elektronische Ökosystem der Xiaomi-Smart-Home-Vernetzung. Nach der Verbindung mit der Mijia-APP können Sie die angeschlossenen Geräte problemlos mit Ihrem Mobiltelefon steuern. Viele Benutzer wissen jedoch immer noch nicht, wie sie Xiaomi hinzufügen können Wenn Sie die App zu Hause verwenden, erfahren Sie in diesem Tutorial die spezifischen Verbindungsmethoden und -schritte, in der Hoffnung, allen Bedürftigen zu helfen. 1. Nachdem Sie die Xiaomi-App heruntergeladen haben, erstellen Sie ein Xiaomi-Konto oder melden Sie sich an. 2. Methode zum Hinzufügen: Nachdem das neue Gerät eingeschaltet ist, bringen Sie das Telefon in die Nähe des Geräts und schalten Sie den Xiaomi-Fernseher ein. Unter normalen Umständen wird eine Verbindungsaufforderung angezeigt. Wählen Sie „OK“, um den Geräteverbindungsvorgang zu starten. Wenn keine Aufforderung erscheint, können Sie das Gerät auch manuell hinzufügen. Die Methode ist: Klicken Sie nach dem Aufrufen der Smart Home-App auf die 1. Schaltfläche unten links

Google ist begeistert: JAX-Leistung übertrifft Pytorch und TensorFlow! Es könnte die schnellste Wahl für das GPU-Inferenztraining werden Google ist begeistert: JAX-Leistung übertrifft Pytorch und TensorFlow! Es könnte die schnellste Wahl für das GPU-Inferenztraining werden Apr 01, 2024 pm 07:46 PM

Die von Google geförderte Leistung von JAX hat in jüngsten Benchmark-Tests die von Pytorch und TensorFlow übertroffen und belegt bei 7 Indikatoren den ersten Platz. Und der Test wurde nicht auf der TPU mit der besten JAX-Leistung durchgeführt. Obwohl unter Entwicklern Pytorch immer noch beliebter ist als Tensorflow. Aber in Zukunft werden möglicherweise mehr große Modelle auf Basis der JAX-Plattform trainiert und ausgeführt. Modelle Kürzlich hat das Keras-Team drei Backends (TensorFlow, JAX, PyTorch) mit der nativen PyTorch-Implementierung und Keras2 mit TensorFlow verglichen. Zunächst wählen sie eine Reihe von Mainstream-Inhalten aus

Langsame Internetgeschwindigkeiten für Mobilfunkdaten auf dem iPhone: Korrekturen Langsame Internetgeschwindigkeiten für Mobilfunkdaten auf dem iPhone: Korrekturen May 03, 2024 pm 09:01 PM

Stehen Sie vor einer Verzögerung oder einer langsamen mobilen Datenverbindung auf dem iPhone? Normalerweise hängt die Stärke des Mobilfunk-Internets auf Ihrem Telefon von mehreren Faktoren ab, wie z. B. der Region, dem Mobilfunknetztyp, dem Roaming-Typ usw. Es gibt einige Dinge, die Sie tun können, um eine schnellere und zuverlässigere Mobilfunk-Internetverbindung zu erhalten. Fix 1 – Neustart des iPhone erzwingen Manchmal werden durch einen erzwungenen Neustart Ihres Geräts viele Dinge zurückgesetzt, einschließlich der Mobilfunkverbindung. Schritt 1 – Drücken Sie einfach einmal die Lauter-Taste und lassen Sie sie los. Drücken Sie anschließend die Leiser-Taste und lassen Sie sie wieder los. Schritt 2 – Der nächste Teil des Prozesses besteht darin, die Taste auf der rechten Seite gedrückt zu halten. Lassen Sie das iPhone den Neustart abschließen. Aktivieren Sie Mobilfunkdaten und überprüfen Sie die Netzwerkgeschwindigkeit. Überprüfen Sie es erneut. Fix 2 – Datenmodus ändern 5G bietet zwar bessere Netzwerkgeschwindigkeiten, funktioniert jedoch besser, wenn das Signal schwächer ist

Die Vitalität der Superintelligenz erwacht! Aber mit der Einführung der sich selbst aktualisierenden KI müssen sich Mütter keine Sorgen mehr über Datenengpässe machen Die Vitalität der Superintelligenz erwacht! Aber mit der Einführung der sich selbst aktualisierenden KI müssen sich Mütter keine Sorgen mehr über Datenengpässe machen Apr 29, 2024 pm 06:55 PM

Ich weine zu Tode. Die Daten im Internet reichen überhaupt nicht aus. Das Trainingsmodell sieht aus wie „Die Tribute von Panem“, und KI-Forscher auf der ganzen Welt machen sich Gedanken darüber, wie sie diese datenhungrigen Esser ernähren sollen. Dieses Problem tritt insbesondere bei multimodalen Aufgaben auf. Zu einer Zeit, als sie ratlos waren, nutzte ein Start-up-Team der Abteilung der Renmin-Universität von China sein eigenes neues Modell, um als erstes in China einen „modellgenerierten Datenfeed selbst“ in die Realität umzusetzen. Darüber hinaus handelt es sich um einen zweigleisigen Ansatz auf der Verständnisseite und der Generierungsseite. Beide Seiten können hochwertige, multimodale neue Daten generieren und Datenrückmeldungen an das Modell selbst liefern. Was ist ein Modell? Awaker 1.0, ein großes multimodales Modell, das gerade im Zhongguancun-Forum erschienen ist. Wer ist das Team? Sophon-Motor. Gegründet von Gao Yizhao, einem Doktoranden an der Hillhouse School of Artificial Intelligence der Renmin University.

Der erste Roboter erscheint, der menschliche Aufgaben autonom erledigt, mit fünf flexiblen Fingern und übermenschlicher Geschwindigkeit, und große Modelle unterstützen das Training im virtuellen Raum Der erste Roboter erscheint, der menschliche Aufgaben autonom erledigt, mit fünf flexiblen Fingern und übermenschlicher Geschwindigkeit, und große Modelle unterstützen das Training im virtuellen Raum Mar 11, 2024 pm 12:10 PM

Diese Woche gab FigureAI, ein Robotikunternehmen, an dem OpenAI, Microsoft, Bezos und Nvidia beteiligt sind, bekannt, dass es fast 700 Millionen US-Dollar an Finanzmitteln erhalten hat und plant, im nächsten Jahr einen humanoiden Roboter zu entwickeln, der selbstständig gehen kann. Und Teslas Optimus Prime hat immer wieder gute Nachrichten erhalten. Niemand zweifelt daran, dass dieses Jahr das Jahr sein wird, in dem humanoide Roboter explodieren. SanctuaryAI, ein in Kanada ansässiges Robotikunternehmen, hat kürzlich einen neuen humanoiden Roboter auf den Markt gebracht: Phoenix. Beamte behaupten, dass es viele Aufgaben autonom und mit der gleichen Geschwindigkeit wie Menschen erledigen kann. Pheonix, der weltweit erste Roboter, der Aufgaben autonom in menschlicher Geschwindigkeit erledigen kann, kann jedes Objekt sanft greifen, bewegen und elegant auf der linken und rechten Seite platzieren. Es kann Objekte autonom identifizieren

See all articles