Node.js - senden Sie das Formular ab

Ich verwenden node.js und express. Wenn ich auf den Knopf drücke (btnSend), ich möchte, um Daten zu senden node.js per express (ohne die Seite aktualisieren). Wie sende ich Daten mithilfe von jQuery?

<form action="/Send" method="post">
Username: 
<input type="text" name="user" id="txtUser" />
<input type="submit" value="Submit" id="btnSend" />
</form>
  • Das ist off topic, aber wrappen "Benutzername:" und der text-input-element mit einem label-tag. Es macht die form ein bisschen mehr semantische und nutzbar.
InformationsquelleAutor Jenan | 2011-12-24
  1. 17

    Hier ist eine grobe Skizze von dem, was Ihr jQuery Aussehen sollte:

    $("form").submit(function(e) {
    e.preventDefault(); //Prevents the page from refreshing
    var $this = $(this); //`this` refers to the current form element
    $.post(
        $this.attr("action"), //Gets the URL to sent the post to
        $this.serialize(), //Serializes form data in standard format
        function(data) { /** code to handle response **/ },
        "json" //The format the response should be in
    );
});

    Dieser code snippet findet alle form-Elemente auf der Seite und wartet auf ein submit-Ereignis von Ihnen. Eine form kann sein, senden in einer Reihe Wege (e.x. Klick auf einen submit-button, drücken Sie enter, etc...), so dass für die Zwecke der Benutzerfreundlichkeit ist es am besten zu hören Einreichen, Ereignisse im direkten Gegensatz zum hören für click-Ereignisse-Taste auf "Absenden" buttons.

    Wenn ein submit-Ereignis nicht Auftritt, wird der code oben wird zunächst verhindert, dass die Standard-browser-Aktionen (die unter anderem aktualisiert die Seite), indem Sie e.preventDefault. Es verwendet dann $.post zum senden der Formular-Daten zu der angegebene url im action-Attribut. Beachten Sie, dass $.fn.serialisieren wird zum serialisieren der Formulardaten in ein standard-format.

    Ihre ausdrückliche code sollte wie folgt Aussehen:

    var express = require('express')
  , app = express.createServer();

app.use(express.bodyParser()); //Automatically parses form data

app.post('/Send', function(req, res){ //Specifies which URL to listen for
  //req.body -- contains form data
});

app.listen(3000);

    In der Dokumentation auf express.bodyParser ist etwas spärlich, aber nach ein bisschen code Höhlenforschung es sieht aus wie es verwendet Knoten-querystring unterhalb des covers.

    Hoffe, das hilft!

    • Ich habe Probleme dabei, die client-side-response-Funktion ausgelöst. function(data) { /** code handle-response -**/ }, benötigen Sie zum hinzufügen eines res.beenden() oder so auf der client-Seite code?
    • Nein, Sie sollten nicht haben zu rufen res.end auf der client-Seite-nur auf der server-Seite. In chrome dev-Konsole, würde ich in der Netzwerk-Registerkarte, und stellen Sie sicher, dass die post-Anforderung ist der Abschluss ohne Fehler. Werfen Sie auch einen Blick auf Ihre server-side-response-code (d.h. der code in der // req.body -- contains form data - Funktion) und stellen Sie sicher, Sie beenden Ihre Antwort richtig. Hoffe, das hilft.
    • Ich war in der Lage, um das Problem einzugrenzen, und es ist in keinem Zusammenhang zu dieser Frage. Für einige Grund, die app ist nicht zu finden fs.appendfile bei der Verwendung von für immer, aber es funktioniert gut, wenn mit nodemon.
    InformationsquelleAutor Xavi
Schreibe einen Kommentar