Detaillierte Zusammenfassung der Übermittlungsmethoden für Webformulare

Detaillierte Zusammenfassung der Übermittlungsmethoden für Webformulare

Sehen wir uns zunächst verschiedene Möglichkeiten zum Absenden eines Formulars an :
1. <!--Allgemeiner Senden-Button-->
<input type="submit" value="Senden">
2. <!--Benutzerdefinierter Senden-Button-->
<button type="Senden">Senden</button>
3. <!--Bildschaltfläche-->
<Eingabetyp="Bild" src = "btn.png">
Beschreibung: Wenn der Benutzer auf eine Schaltfläche oder Bildschaltfläche klickt, wird das Formular übermittelt. Eine Senden-Schaltfläche kann entweder mit <input> oder <button> definiert werden, indem deren Attributwert auf „submit“ gesetzt wird, während eine Bild-Schaltfläche definiert wird, indem der Typ-Attributwert von <input> auf „image“ gesetzt wird. Klicken wir also einfach auf die vom Code generierte Schaltfläche, können wir das Formular absenden.
4. Verhindern des Absendens des Formulars: Solange eine der oben aufgeführten Schaltflächen im Formular vorhanden ist und das entsprechende Formular-Steuerelement den Fokus hat, kann das Formular durch Drücken der Eingabetaste abgesendet werden. Wenn im Formular keine Schaltfläche „Senden“ vorhanden ist, wird das Formular durch Drücken der Eingabetaste nicht gesendet.
Wenn Sie ein Formular auf diese Weise absenden, löst der Browser das Übermittlungsereignis aus, bevor er die Anforderung an den Server sendet. Dies gibt uns die Möglichkeit, die Formulardaten zu validieren und zu entscheiden, ob das Absenden des Formulars zugelassen wird. Wenn das Standardverhalten dieses Ereignisses verhindert wird, wird die Übermittlung des Formulars abgebrochen. Der folgende Code verhindert beispielsweise, dass das Formular übermittelt wird:

Code kopieren
Der Code lautet wie folgt:

var EventUtil = {
addHandler: Funktion (Element, Typ, Handler) {
wenn (element.addEventListener) {
element.addEventListener(Typ, Handler, false);
} sonst wenn (element.attachEvent) {
element.attachEvent("on" + Typ, Handler);
} anders {
Element["ein" + Typ] = Handler;
}
},
getEvent: Funktion (Ereignis) {
Ereignis zurückgeben? Ereignis: Fenster.Ereignis;
},
preventDefault: Funktion (Ereignis) {
wenn (event.preventDefault) {
event.preventDefault();
} anders {
event.returnValue = falsch;
}
}
};
var form = document.getElementById("meinFormular");
EventUtil.addHandler(Formular, "Senden", Funktion () {
//Holen Sie sich das Ereignisobjekt
Ereignis = EventUtil.getEvent(Ereignis);
//Standardereignis verhindern
EventUtil.preventDefault(Ereignis);
});

Der Aufruf der Methode preventDefault() verhindert, dass das Formular übermittelt wird. Im Allgemeinen wird diese Technik verwendet, wenn die Formulardaten ungültig sind und nicht an den Server gesendet werden können.
5. In JavaScript können Sie ein Formular auch übermitteln, indem Sie die Methode „submit()“ programmgesteuert aufrufen.
Bei dieser Methode ist es nicht erforderlich, dass das Formular eine Schaltfläche zum Senden enthält, und das Formular kann jederzeit normal gesendet werden. Schauen wir uns ein Beispiel an:
var form = document.getElementById("meinFormular");
//Formular abschicken
form.submit();
Wenn ein Formular durch Aufrufen der Methode „submit()“ übermittelt wird, wird das Übermittlungsereignis nicht ausgelöst. Denken Sie daher daran, die Formulardaten vor dem Aufrufen dieser Methode zu validieren.
Das größte Problem, das beim Absenden eines Formulars auftreten kann, ist das wiederholte Absenden. Wenn nach dem ersten Absenden des Formulars längere Zeit keine Antwort erfolgt, kann es passieren, dass Benutzer ungeduldig werden. An diesem Punkt klicken Sie möglicherweise wiederholt auf die Schaltfläche „Senden“. Dies führt häufig zu Problemen (weil der Server doppelte Anfragen verarbeiten muss) oder Fehlern (wenn eine Bestellung aufgegeben wird, werden möglicherweise mehrere zusätzliche Kopien bestellt).
Es gibt zwei Möglichkeiten, dieses Problem zu lösen :
Deaktivieren Sie die Schaltfläche „Senden“, nachdem das Formular zum ersten Mal übermittelt wurde.
Verwenden Sie den Ereignishandler „onsubmit“, um nachfolgende Übermittlungsvorgänge des Formulars abzubrechen.
Als Nächstes stellen wir verschiedene Methoden zum Absenden über das Formular im Detail vor . <br />Methode 1: Verwenden Sie die Funktion onsubmit() des Formulars (wird häufig verwendet). Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
Funktion validateForm(){
if(document.reply.title.value == ""){ //Formular nach Formularnamen abrufen
alert("Bitte geben Sie den Titel ein!");
Dokument.Antwort.Titel.Fokus();
gibt false zurück;
}
if(document.forms[0].cont.value == ""){ //Formular über das Formular-Array abrufen
alert("Bitte geben Sie den Inhalt ein!");
Dokument.Antwort.Fortsetzung.Fokus();
gibt false zurück;
}
gibt true zurück;
}
<form name="antworten" method="posten" onsubmit="return validateForm();">
<input Typ="Text" Name="Titel" Größe="80" />

<textarea name="forts" cols="80" rows="12"></textarea>

<input type="submit" value="Senden" >
</form>
Beachten:
1. Das Onsubmit-Attribut muss das Schlüsselwort „return“ enthalten, andernfalls wird die Funktion direkt ohne Rückgabe ausgeführt.
2.validateForm muss einen booleschen Rückgabewert zurückgeben
3. Die Schaltfläche „Senden“ sollte als „Sendentyp“ geschrieben werden

Methode 2: Verwenden Sie die Funktion onclick() der Submit-Komponente des Eingabetyps, um das Attribut onsubmit="return validateForm()" im obigen Formular-Tag zu entfernen.
Fügen Sie der Schaltfläche „Senden“ wie folgt ein Onclick-Ereignis hinzu:
<input type="submit" value="Senden" onclick="return validateForm();">
Methode 3: Verwenden Sie die Funktion onclick() der Schaltflächenkomponente, um manuell zu übermitteln. Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
Funktion „Element ändern“ () {
wenn (trim(document.getElementById("itemName").value) == "") {
alert("Materialname darf nicht leer sein!");
document.getElementById("itemName").fokus();
zurückkehren;
}
mit (document.getElementById("itemForm")) {
Methode = "posten";
Aktion = "item.do?command=ändern&pageNo=${itemForm.pageNo}";
einreichen();
}
}
//zurückkehren
Funktion goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</Skript>
<Formularname="ArtikelFormular" ID="ArtikelFormular">
<Eingabename="Artikelnummer" Typ="Text" ID="Artikelnummer" Wert="${ Artikel.Artikelnummer }" >
<Eingabename="Artikelname" Typ="Text" ID="Artikelname" Wert="${ Artikel.Artikelname }" >
<input name="btnModify" type="button" id="btnModify" value="Ändern" onclick="modifyItem()">
</form>
Beachten:
1. Legen Sie beim Senden die Aktions- und Methodenattribute des Formulars fest und senden Sie es dann mit der Funktion form.submit() ab.

Die spezifische Implementierung des obigen Codes kann wie folgt bezeichnet werden:
http://www.bjp111.com/zhshlist.aspx
http://www.bjp111.com/huixiaolist.aspx
http://www.bjp111.com/daililist.aspx
Zusammenfassung für Anfänger :
Beim Validieren von Komponenten in einem Formular verwenden die ersten beiden, einschließlich des Formulars selbst, das Namensattribut.
Wenn beim Absenden des Formulars keine Antwort erfolgt und Sie sicher sind, dass kein Problem mit dem Code zum Absenden des Formulars vorliegt, überprüfen Sie bitte den JS-Code, bevor Sie das Formular absenden. Manchmal verursachen Fehler im vorherigen JS-Code unerklärliche Probleme.

<<:  Mehrere spezifische Methoden zur MySQL-Speicherplatzbereinigung

>>:  So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren

Artikel empfehlen

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Inhaltsverzeichnis Vorwort einführen 1. Wirkungsm...

DNS-Konfigurationsmethode für den Linux Domain Name Service

Was ist DNS Der vollständige Name von DNS lautet ...

Das Linux-Betriebssystem verwendet Python, um die Visualisierungsfunktion des Task-Managers zu implementieren

1. Python-Installation 1. Erstellen Sie einen Ord...

Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt

In diesem Artikel wird der spezifische Code für d...

Allgemeine Parameter für Popup-Fenster von IE-Webseiten können Sie selbst festlegen

Das Popup hat nichts damit zu tun, ob Ihr aktuelle...

MySQL-Datenbank implementiert MMM-Hochverfügbarkeitsclusterarchitektur

Konzept MMM (Master-Master-Replikationsmanager fü...

Einführung in die Generierung von Kubernetes-Zertifikaten mit OpenSSL

Kubernetes unterstützt drei Arten der Authentifiz...

Detaillierte Installation und Verwendung von RocketMQ in Docker

Um nach RocketMQ-Images zu suchen, können Sie auf...

Detaillierte Erklärung zur Verwendung von Titel-Tags und Absatz-Tags in XHTML

XHTML-Überschriftenübersicht Wenn wir Word-Dokume...

Ein kurzer Vortrag über JavaScript Sandbox

Vorwort: Apropos Sandboxen: Wir denken vielleicht...

Detaillierte Erklärung zur Verwendung von JavaScript WeakMap

Ein WeakMap-Objekt ist eine Sammlung von Schlüsse...

JavaScript implementiert einen langen Bild-Scroll-Effekt

In diesem Artikel wird der spezifische Code für d...

js, um einen einfachen Akkordeoneffekt zu erzielen

In diesem Artikel wird der spezifische Code von j...

So implementieren Sie eine MySQL-Datenbanksicherung in Golang

Hintergrund Navicat ist das beste MySQL-Visualisi...

Lösung für 404-Fehler beim Herunterladen einer APK-Datei vom IIS-Server

Bei der Verwendung von IIS als Server wurde die A...