从 HTML 表单发送数据到 Node.js 服务器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19282779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Send data to Node.js server from HTML form
提问by Oscar Swanros
I'm learning Node.js.
我正在学习 Node.js。
I have this in 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: localhost:10000/?number1=50000&number2=1echoes 50001 on my browser, so it works.
像这样的 URL：localhost:10000/?number1=50000&number2=1在我的浏览器上显示 50001，所以它可以工作。
Without using Express, I need to send those 2 params through a form using HTML.
在不使用 Express 的情况下，我需要通过使用 HTML 的表单发送这 2 个参数。
How can this be achieved?
如何做到这一点？
回答by josh3736
The simple answer is <form method="get">. The browser will turn the form data into query string parameters that you're already handling.
简单的答案是<form method="get">。浏览器会将表单数据转换为您已经在处理的查询字符串参数。
If you need to POST, HTML forms are posted as the request entity-body. In node, a ClientRequest(the requestvariable in your example) emits a dataevent every time a chunk of the body arrives at the server. You will not receive the entire body at once.You must buffer until you've received the entire body, then parse the data.
如果需要POST，HTML 表单将作为请求实体主体发布。在节点中， a ClientRequest（request您示例中的变量）data每次主体的一部分到达服务器时都会发出一个事件。 您不会立即收到整个身体。您必须缓冲直到收到整个正文，然后解析数据。
This is hard to get right because of things like chunked vs normal Transfer-Encodingand the different ways browsers can submit form data. I'd just use formidable(which is what Express uses behind the scenes anyway), or at least study how it handles form posts if you absolutely must implement your own. (And really, do this only for educational purposes – I can't stress enough that you should use formidable for anything that might end up in production.)
由于诸如分块与正常Transfer-Encoding以及浏览器提交表单数据的不同方式之类的事情，这很难做到正确。我只会使用强大的（无论如何，这是 Express 在幕后使用的），或者至少研究它如何处理表单帖子，如果您绝对必须实现自己的。（实际上，这只是出于教育目的——我再怎么强调也不为过，你应该将强大的用于任何可能最终投入生产的东西。）
回答by maudulus
Your jade form (assuming you're using express) should look like this:
您的玉表（假设您使用的是 express）应如下所示：
form(action="/" method="post")
input( name="whateverSearch" placeholder="search" autofocus)
Then to pass the newly submitted datapoint whateverSearchyou use req.bodyto find it (see below). Here, I've taken the data point and logged it to the console, and then submitted it to the DOM, as well as the title for the page.
然后传递whateverSearch您req.body用来查找它的新提交的数据点（见下文）。在这里，我获取了数据点并将其记录到控制台，然后将其提交给 DOM，以及页面的标题。
router.post('/', function(req, res) {
whateverSearch = req.body.whateverSearch;
console.log(whateverSearch);
res.render('index', { title: 'MyApp', inputData: whateverSearch});
});
回答by Oscar Swanros
I solved my problem this way:
我这样解决了我的问题：
sum.js:
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：
<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>
Don't know if it's the right way of doing it, but it solved my needs.
不知道这是否是正确的做法，但它解决了我的需求。
