All geek questions in one place

Send data to Node.js server from HTML form

I am learning Node.js.

I have this on my 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);

An url like this is: localhost:10000/?number1=50000&number2=1 echo 50001 in my browser, so it works.

Without using Express, I need to submit these 2 parameters via the form using HTML.

How can this be achieved?

+6
source share
3 answers

The simple answer is <form method="get"> . The browser will turn the form data into query string parameters that you are already processing.

If you need POST , HTML forms are submitted as the request body. In node a ClientRequest (the request variable in your example) generates a data event every time a piece of the body arrives at the server. You will not get the whole body at once. You have to buffer until you get the whole body, and then parse the data.

It’s hard to get right because of things like chunked vs normal Transfer-Encoding and the various ways that browsers can submit form data. I would just use formidable (this is what Express uses behind the scenes anyway), or at least learn how it handles form entries if you absolutely must implement your own. (And really, do this for educational purposes only. I cannot stress that you must use the formidable for anything that could end in the production process.)

+5
source

I solved my problem as follows:

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>

I don’t know if he did it right, but he decided my needs.

+2
source

Your jade form (if you use express) should look like this:

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

Then, to pass the newly submitted datapoint whateverSearch , you use req.body to find it (see below). Here I took a data point and registered it on the console, and then sent it to the DOM, as well as the page title.

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

Source: https://habr.com/ru/post/955625/

More articles:


All Articles