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

Wie implementiert MySQL ACID-Transaktionen?

Vorwort Kürzlich wurde ich in einem Interview gef...

Lösung für ungültige obere Ränder von Elementen in Div-Tags

Genau wie der Titel sagt. Die Frage ist sehr merkw...

Vue implementiert die Seiten-Caching-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

xtrabackup MySQL-Datenbank sichern und wiederherstellen

Aufgrund einiger seiner eigenen Merkmale (Sperren...

So ändern Sie die Standardcodierung von MySQL in Linux

Wenn während des Entwicklungsprozesses nach der W...

Das Phänomen des Margin-Top-Collapses und die spezifische Lösung

Was ist ein Margin-Top-Collaps? Der Margin-Top-Co...

Anwendungsszenarien für React useMemo und useCallback

Inhaltsverzeichnis verwendenMemo useCallback verw...

Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL

Wenn ein Index die Werte aller abzufragenden Feld...

Detailliertes Tutorial zur Installation von ElasticSearch 6.4.1 auf CentOS7

1. Laden Sie das ElasticSearch 6.4.1-Installation...

JS Canvas-Oberfläche und Animationseffekte

Inhaltsverzeichnis Überblick Canvas API: Grafiken...

Ein seltener Fehler und eine Lösung für die vollständige SQL Server-Sicherung

1. Fehlerdetails Als ich einmal manuell eine voll...

Analyse der Methode zum Einrichten geplanter Aufgaben in MySQL

Dieser Artikel beschreibt anhand eines Beispiels,...

Lösen Sie das Matching-Problem in CSS

Problembeschreibung Wie wir alle wissen, wird bei...