Drei Beispiele für Node.js-Methoden zum Abrufen von Formulardaten

Vorwort

Nodejs ist eine serverseitige Sprache. Während der Entwicklung, Registrierung und Anmeldung usw. müssen Daten über ein Formular zur Beurteilung an das Backend gesendet werden. Welche Methoden kann Nodejs als serverseitige Sprache verwenden, um den Post-Request-Wert des Aufrufformulars zu empfangen?

Die folgenden drei werden häufig verwendet. Sehen wir uns ihre spezifische Verwendung anhand von Beispielen an.

Wir verwenden das Express-Plug-In im Backend. Sie müssen also etwas über Express wissen, um es problemlos lesen zu können ~

1. Initialisieren Sie zunächst npm, laden Sie das Express-Paket herunter, importieren Sie das Modul und erstellen Sie ein Serviceobjekt

//Importieren Sie das Express-Modul const express = require("express");
// Ein Serverobjekt erstellen const app = express();

Formular Formular Lieferung

Mit dieser Funktion des Absenderformulars können Sie im Formular auf eine Schaltfläche vom Typ „Senden“ klicken, um die Formulardaten zu übermitteln. Das Formular ist im Objektformat. Der Attributname ist der Namenswert im Eingabetag und der Attributwert ist der Wert des Eingabetags. Das folgende Beispiel zeigt die spezifische Schreibmethode.

<form action="/todata" method="POST">
        <Tabelle>
            <tr>
                <td>Name</td>
                <td> <input type="text" name="benutzer" id=""></td>
            </tr>
            <tr>
                <td>Passwort</td>
                <td> <input type="text" name="password" id=""></td>
            </tr>
            <tr>
                <button type="submit">Senden</button>
            </tr>
        </Tabelle>
</form>

Da es sich bei der Formularübermittlung um eine Post-Anfrage handelt, muss der Node.JS-Code im Backend den Antwortheader der Post-Anfragedaten analysieren und dann app.use(bodyParser.urlencoded({ extended: false })) verwenden, um die vom Front-End übergebenen Daten darzustellen. Der spezifische Backend-Code ist wie folgt.

const express = erfordern("express");
const app = express();
app.verwenden(express.static("./"))
var bodyParser = erfordern('body-parser')
// Antwortheader „application/x-www-form-urlencoded“ analysieren app.use(bodyParser.urlencoded({ extended: false }))
app.post("/todata",(req,res)=>{
    Konsole.log(Anforderung.Body);
    res.send("Übermittlung erfolgreich")
})
app.listen("80",()=>{
    console.log("Erfolg");
})

Führen Sie den Knotencode über das Terminal aus, um die Ergebnisse anzuzeigen

Ajax-Anforderungsübermittlung

Beim Senden von Anfragen an das Backend werden häufig Get- und Post-Anfragen verwendet. Ebenso können Formulardaten über Ajax-Post-Anfragen an das Backend gesendet werden. Basierend auf dem obigen Beispiel ist der Front-End-Code dieser Methode wie folgt.

	 $("#inp3").on("klicken",function(){
        let Benutzer = $("#inp1").val();
        lass Passwort = $("#inp2").val();
        $.ajax({
        url:"todata",
        Typ: „Beitrag“,
        Daten:{
            Benutzer,
            Passwort
        },
        Erfolg: (Daten) => {
            Alarm (Daten)
        }
         })
    })

Hier erhalten wir die Werte der beiden Eingaben und binden dann die Senden-Schaltfläche, um eine Ajax-Anforderung zu senden. Die an das Backend gesendeten Daten werden im Datenattribut gespeichert. Das Backend erhält es auch über req.body. Es ist wichtig zu beachten, dass das Formular keinen Aktionswert schreiben muss und die Schaltfläche im Formular das Standardverhalten verhindern muss (andernfalls wird die Anforderung beim Klicken direkt gesendet, was dazu führt, dass die Ajax-Anforderung fehlschlägt) oder den Eingabe-Tag-Typ als Schaltflächentyp verwendet werden muss.

Formularserialisierung

Diese Sendemethode ist eine gängige Methode zum Senden von Formularen. Die Anforderung wird auch über Ajax gesendet, und das Namensattribut kann auch direkt als Attributname des Backends gesendet werden. Man könnte es als eine Kombination der beiden oben genannten Methoden bezeichnen.

		$("#inp3").on("klicken",function(){
        $.ajax({
        url:"todata",
        Typ: „Beitrag“,
        Daten: $("Formular").serialisieren(),
        Erfolg: (Daten) => {
            Alarm (Daten)
        }
         })
    })

Sie müssen nur die Methode $("form").serialize() verwenden, um den Wert des Namensattributs zu erhalten.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Abrufen von Formulardaten mit nodejs. Weitere Informationen zum Abrufen von Formulardaten mit nodejs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!