2013-10-09 29 views
6

Ich lerne Node.js.Senden von Daten an Node.js Server von HTML-Formular

Ich habe dies in meinem Server:

var http = require("http"); 
var url = require("url"); 

http.createServer(function(request, response){ 
    response.writeHead(200, {"Content-Type":"text/plain"}); 
    var params = url.parse(request.url,true).query; 

    console.log(params); 

    var a = params.number1; 
    var b = params.number2; 

    var numA = new Number(a); 
    var numB = new Number(b); 

    var numOutput = new Number(numA + numB).toFixed(0); 

    response.write(numOutput); 
    response.end(); 
}).listen(10000); 

Eine URL wie folgt aus: localhost:10000/?number1=50000&number2=1 Echos 50001 in meinem Browser, so dass es funktioniert.

Ohne Express zu verwenden, muss ich diese 2 Parameter über ein Formular mit HTML senden.

Wie kann dies erreicht werden?

+1

http://stackoverflow.com/questions/15568851/how-i-can-send-data-from-html-form-to-node-js-function – Andy897

+0

@ Andy897 - sah schon dazu. Mein Lehrer möchte jedoch nicht, dass ich Express benutze. –

+0

http://stackoverflow.com/questions/8811213/how-to-post-a-form-from-html-into-node-js-file – Andy897

Antwort

5

Die einfache Antwort ist <form method="get">. Der Browser wandelt die Formulardaten in Abfragezeichenfolgenparameter um, die Sie bereits verarbeiten.

Wenn Sie POST benötigen, werden HTML-Formulare als Anforderung entity-body veröffentlicht. Im Knoten gibt eine ClientRequest (die request Variable in Ihrem Beispiel) ein Ereignis data jedes Mal aus, wenn ein Stück des Körpers am Server ankommt. Sie erhalten nicht den gesamten Körper auf einmal. Sie müssen puffern, bis Sie den gesamten Körper erhalten haben, und dann die Daten analysieren.

Das ist schwer zu bekommen, weil Dinge wie chunked vs normal Transfer-Encoding und die verschiedenen Möglichkeiten, wie Browser Formulardaten übermitteln können. Ich würde einfach formidable (das ist, was Express hinter den Kulissen sowieso verwendet), oder zumindest studieren, wie es Form Posts behandelt, wenn Sie unbedingt Ihre eigenen implementieren müssen. (Und wirklich, tut dies nur für pädagogische Zwecke – ich nicht genug betonen kann, dass man für etwas formidable verwenden sollte, die in der Produktion könnten am Ende.)

2

ich mein Problem auf diese Weise gelöst:

sum.js :

var http = require("http"); 
var url = require("url"); 

http.createServer(function(request, response){ 
    response.writeHead(200, {"Content-Type":"text/plain"}); 
    var params = url.parse(request.url,true).query; 

    console.log(params); 

    var a = params.number1; 
    var b = params.number2; 

    var numA = new Number(a); 
    var numB = new Number(b); 

    var sum = new Number(numA + numB).toFixed(0); 

    response.write(sum); 
    response.end(); 
}).listen(10001); 

Index.HTML:

<html> 
    <head> 
      <title> Pedir random </title> 

      <script type="text/javascript"> 
       function operacion(){ 
         var n1 = document.getElementById("num1").value; 
         var n2 = document.getElementById("num2").value; 

         location.href = "http://localhost:10001" + "?number1=" + n1 + "&number2=" + n2; 
       } 
      </script> 

    </head> 

    <body> 
      <h1>Inserte dos números </h1> 
      <form id="forma1"> 
       <input type="text" id="num1"></input> 
       <input type="text" id="num2"></imput> 
       <input type="button" onClick="operacion()" id="enviar" value="enviar"></input> 
      </form> 
    </body> 

<html> 

sie wissen nicht, ob es der richtige Weg, es zu tun, aber es löste meine Bedürfnisse.

+4

Es gibt keinen Grund, JavaScript im Browser so zu verwenden. Ändere es in '

' und '' und du bist fertig. – josh3736

2

Ihre Jade Form (vorausgesetzt, Sie ausdrücklich verwenden) sollte wie folgt aussehen:

form(action="/" method="post") 
    input(name="whateverSearch" placeholder="search" autofocus) 

dann die neu vorgelegten Datenpunkt passieren whateverSearch Sie verwenden req.body es zu finden (siehe unten). Hier habe ich den Datenpunkt genommen und an der Konsole angemeldet und ihn dann an das DOM sowie den Titel für die Seite gesendet.

router.post('/', function(req, res) { 
    whateverSearch = req.body.whateverSearch; 
    console.log(whateverSearch); 
    res.render('index', { title: 'MyApp', inputData: whateverSearch}); 
}); 
Verwandte Themen