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

Welche Schleife ist in JavaScript die schnellste?

Wenn wir wissen, welche For-Schleife oder welcher...

Installieren Sie mysql5.7.10 manuell unter Ubuntu

Dieses Tutorial beschreibt den Prozess der manuel...

Detailliertes Tutorial zur Installation von Nginx 1.16.0 unter Linux

Da ich in letzter Zeit mit Linux herumgespielt ha...

Einführung in HTML DOM_PowerNode Java Academy

Was ist DOM? Mit JavaScript können Sie das gesamt...

HTML+CSS zum Erstellen eines geschichteten Pyramidenbeispiels

Dieser Artikel stellt hauptsächlich das Beispiel ...

So installieren Sie einen SVN-Server unter Linux

1. Yum-Installation yum installiere Subversion 2....

So lösen Sie das Problem ERROR 2003 (HY000) beim Starten von MySQL

1. Problembeschreibung Beim Starten von MySQL tri...

Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten

1. Inline-Stile Um Inline-Stile zum virtuellen DO...