JavaScript implementiert die asynchrone Übermittlung von Formulardaten

JavaScript implementiert die asynchrone Übermittlung von Formulardaten

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung der asynchronen Übermittlung von Formulardaten zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Wirkung ist wie folgt:

Schauen wir uns zunächst den HTML-Code an:

<div Klasse="Container">
       <form class="form-horizontal" onsubmit="return false;">
           <div Klasse="Formulargruppe">
               <label class="control-label col-md-3">Name:</label>
               <div Klasse="col-md-4">
                   <input type="Typ" name="txtname" value=" " Klasse="Formularsteuerung" id="txtName"/>
               </div>
           </div>
           <div Klasse="Formulargruppe">
               <label class="control-label col-md-3">Geschlecht:</label>
               <div Klasse="col-md-4">
                   <Wählen Sie Klasse = "Formularsteuerung" Name = "cboSex" ID = "cboSex">
                       <option>Männlich</option>
                       <option>Weiblich</option>
                   </Auswählen>
               </div>
           </div>
           <div Klasse="Formulargruppe">
               <label class="control-label col-md-3">Adresse:</label>
               <div Klasse="col-md-4">
                   <textarea Klasse="Formularsteuerung" Name="txtAddress" id="txtAddress"></textarea>
               </div>
           </div>
           <div Klasse="Formulargruppe">
               <button class="btn btn-primary col-md-offset-4" onclick="getVal()">Den Wert des Formulars abrufen</button>
               <button class="btn btn-primary" onclick="postgetData()">Daten übermitteln</button>
               <button class="btn btn-success" onclick="getData()">Daten abrufen</button>
           </div>
       </form>
</div>

Der JavaScript-Teil ist wie folgt:

Funktion postgetData() {
            var xhr;
            wenn (Fenster.XMLHttpRequest) {
                xhr = neue XMLHttpRequest();
            } anders {
                xhr = neues ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getDataRequest", true);
            xhr.setRequestHeader("Inhaltstyp", "Anwendung/x-www-form-urlencoded");
            var yy = "name=" + document.getElementById("txtName")
                .Wert + "&Geschlecht=" + document.getElementById("cboGeschlecht")
                .Wert + "&Adresse=" + document.getElementById("txtAddress").Wert;
            xhr.senden(yy);
            xhr.onreadystatechange = Funktion () {
                wenn (xhr.status == 200 und xhr.readyState == 4) {
                    var txt = xhr.Antworttext;
                    konsole.log(txt);
                }
            }
        }

xhr.send(data); //Im Datenformular zu übermittelnde Daten (Zeichenfolge)

setRequestHeader-Syntax:

setRequestHeader(Header, Wert): Fügt der Anfrage einen HTTP-Header hinzu.
header: gibt den Namen des Headers an
value: Gibt den Wert des Headers an
1-5 AJAX – Serverantwort Verwenden Sie die Eigenschaft responseText oder responseXML des XMLHttpRequest-Objekts, um die Antwort vom Server zu erhalten.
responseText: Ruft die Antwortdaten im Zeichenfolgenformat ab.
responseXML: Ruft die Antwortdaten im XML-Format ab.
Ereignis „onreadystatechange“: Immer wenn sich der ReadyState ändert, wird das Ereignis „onreadystatechange“ ausgelöst.
Die Eigenschaft readyState enthält die Statusinformationen des XMLHttpRequest. Im Folgenden sind drei wichtige Eigenschaften des XMLHttpRequest-Objekts aufgeführt:
onreadystatechange: speichert eine Funktion (oder einen Funktionsnamen), die aufgerufen wird, wenn sich die Eigenschaft readyState ändert.
readyState: enthält den Status der XMLHttpRequest. Variiert von 0 bis 4.
0: Anforderung ist nicht initialisiert
1: Serververbindung hergestellt
2: Anfrage erhalten
3: Anfragebearbeitung
4: Die Anfrage wurde abgeschlossen und die Antwort ist bereit
Status: 200: „OK“ 404: Seite nicht gefunden. Im Ereignis „onreadystatechange“ geben wir die Aufgaben an, die ausgeführt werden sollen, wenn die Serverantwort zur Verarbeitung bereit ist.
Wenn readyState gleich 4 und der Status 200 ist, bedeutet dies, dass die Antwort bereit ist:

Die Controller-Methode ist wie folgt:

Request.Form (Übermittlungsmethode ist Post)

öffentliche ActionResult getDataRequest()
        {
            Zeichenfolgenname = Request.Form["Name"];
            Zeichenfolge Geschlecht = Anfrage.Formular["Geschlecht"];
            Zeichenfolgeadresse = Request.Form["Adresse"];
            Zeichenfolge str = Name + "&" + Geschlecht + "&" + Adresse + "&" + "Anfrage kann nur Post-Daten empfangen";
            gibt Inhalt (str) zurück;
        }

Hierdurch werden die Daten im Formular übermittelt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der asynchronen Formularübermittlung mit jquery.form.js
  • Implementierungsmethode für das asynchrone Überprüfungs-Plugin für das Extjs-Formulareingabefeld
  • Ein einfaches Beispiel für die Verwendung von reinem JavaScript-Ajax zur Implementierung der asynchronen Formularübermittlung in PHP
  • JavaScript schreibt das asynchrone Validierungsformular in ein synchrones Formular um
  • Asynchrone Formularübermittlung per Javascript, Bild-Upload, kompatibel mit asynchroner Simulations-Ajax-Technologie
  • JavaScript implementiert die asynchrone Erfassung von Formulardaten

<<:  So verwenden Sie VirtualBox zum Erstellen einer lokalen virtuellen Maschinenumgebung auf dem Mac

>>:  Lösen Sie die Probleme, die bei der Installation von mysql-8.0.11-winx64 in einer Windows-Umgebung auftreten

Artikel empfehlen

So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate

Einführung Das mysql-utilities-Toolset ist eine S...

Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)

Öffnen Sie eine beliebige Webseite, zum Beispiel ...

Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen

1|0 Kompilieren Sie den Kernel (1) Führen Sie den...

Tiefes Verständnis der Verwendung von ::before/:before und ::after/:after

Teil 1: Grundlagen 1. Im Gegensatz zu Pseudoklass...

Eine audiovisuelle Linux-Distribution, die Audiophile anspricht

Ich bin kürzlich auf das Audiovisual Linux Projec...

Beheben Sie den Fehler während der Verbindungsausnahme in Docker

Wenn Sie Docker zum ersten Mal verwenden, werden ...

Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls

Inhaltsverzeichnis Legen Sie beim Erstellen einer...

Einführung in 10 Hooks in React

Inhaltsverzeichnis Was ist ReactHook? React biete...

Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt

Inhaltsverzeichnis Wasserwelleneffekt Sehen wir u...

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Inhaltsverzeichnis Vorwort Zustand Docker install...

Lösung für den internen Serverfehler Nginx 500

Als ich heute Nginx verwendete, trat ein 500-Fehl...