JavaScript implementiert die asynchrone Erfassung von Formulardaten

In diesem Artikelbeispiel wird der spezifische Code für JavaScript zur asynchronen Erfassung von Formulardaten zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Im vorherigen Artikel haben wir über die Verwendung von JavaScript zum asynchronen Senden von Daten im Formular gesprochen. Heute sprechen wir über die Verwendung von JavaScript zum asynchronen Abrufen von Daten im Formular. Lassen Sie uns ohne weitere Umschweife weiterlesen.

Das Wirkungsdiagramm sieht wie folgt aus:

Klicken Sie auf „Daten abrufen“, um die Daten wie in der folgenden Abbildung dargestellt abzurufen.

Der HTML-Teil lautet wie folgt:

 <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>--Bitte wählen</option>
                       <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 getData() {
            var xhr;
            wenn (Fenster.XMLHttpRequest) {
                xhr = neue XMLHttpRequest();
            } anders {
                xhr = ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getInformation", true);
            xhr.senden();
            xhr.onreadystatechange = Funktion () {
                wenn (xhr.status == 200 und xhr.readyState == 4) {
                    var txt = xhr.responseText; //Den Rückgabewert von xhr abrufen var obj = JSON.parse(txt); //Den String in ein JS-Objekt analysieren document.getElementById("txtName").value = obj.name;
                    document.getElementById("cboSex").value = obj.sex;
                    document.getElementById("txtAddress").Wert = obj.Adresse;
                }
            }
        }

Senden Sie eine Anfrage an den Server

Um eine Anfrage an den Server zu senden, verwenden wir die Methoden open() und send() des XMLHttpRequest-Objekts:
open(method,url,async) gibt den Anforderungstyp und die URL an und ob die Anforderung asynchron verarbeitet werden soll.

1. Was ist synchron und asynchron?

Synchronisierung bedeutet, dass bei der Ausführung einer Anforderung durch einen Prozess, der einige Zeit benötigt, um Informationen zurückzugeben, wartet, bis er die Rückgabeinformationen erhält, bevor er mit der Ausführung fortfährt.
Asynchron bedeutet, dass der Prozess nicht die ganze Zeit warten muss, sondern unabhängig vom Status anderer Prozesse mit der Ausführung der folgenden Operationen fortfährt.
Wenn eine Nachricht zurückgegeben wird, benachrichtigt das System den Prozess, sie zu verarbeiten, wodurch die Ausführungseffizienz verbessert werden kann.

Asynchrone Implementierung:

1. Verwenden Sie HTML und CSS, um Seiten zu implementieren und Informationen auszudrücken
2. Verwenden Sie XMLHttpRequest und Webserver, um Daten asynchron auszutauschen
3. Verwenden Sie JavaScript, um DOM zu betreiben und eine dynamische teilweise Aktualisierung zu erreichen

2. Was ist das XMLHttpRequest-Objekt?

Das XMLHttpRequest-Objekt wird verwendet, um im Hintergrund Daten mit dem Server auszutauschen (Details siehe w3c)
Erstellen Sie ein XMLHttpRequest-Objekt. Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) verfügen über integrierte
XMLHttpRequest-Objekt.
Die Syntax zum Erstellen eines XMLHttpRequest-Objekts lautet:

var xhr = neue XMLHttpRequest();

Ältere Versionen von Internet Explorer (IE5 und IE6) verwenden das ActiveXObject-Objekt:

var xhr = neues ActiveXObject("Microsoft.XMLHTTP");

Um mit allen modernen Browsern, einschließlich IE5 und IE6, zu arbeiten, prüfen Sie, ob der Browser das XMLHttpRequest-Objekt unterstützt. Falls unterstützt, wird ein XMLHttpRequest-Objekt erstellt. Falls nicht unterstützt, erstellen Sie ein ActiveXObject:

var xhr;
     wenn (Fenster.XMLHttpRequest) {
                  // Code für IE7+, Firefox, Chrome, Opera, Safari
                    xhr = neue XMLHttpRequest();
                } anders {
                    // Code für IE6, IE5
                    xhr = neues ActiveXObject("Microsoft.XMLHTTP");
                }

3. Senden Sie eine Anfrage an den Server

Um eine Anfrage an den Server zu senden, verwenden wir die Methoden open() und send() des XMLHttpRequest-Objekts:
open(method,url,async) gibt den Anforderungstyp und die URL an und ob die Anforderung asynchron verarbeitet werden soll.

Die Controller-Methode ist wie folgt:

öffentliche ActionResult getInformation()
        {
            string str = "{\"name\":\"Name\",\"sex\":\"Geschlecht\",\"address\":\"Anmeldename\"}";
            gibt Inhalt (str) zurück;
        }

Zusammenfassen

Das Obige ist das, worüber wir heute sprechen werden. Dieser Artikel stellt nur kurz die Verwendung der asynchronen Erfassung von Formulardaten vor.