目标:
目标是从您输入姓名和乐队的表单中呈现数据。提交后，您将被重定向到一个新页面，该页面将声明
Name: John Doe
Favorite Band: The Who
问题:
我不能在这个练习中使用 express 模块，我用它来渲染数据，但它在页面上是这样的:
Your name is: name=John+Doe&band=The+Who
Your favorite band is: name=John+Doe&band=The+Who
我确实意识到我正在寻找类似 body.name 和 body.band 的东西，但我不断收到错误消息。
我尝试过的:
我已经尝试过 body-parser 和查询字符串，但我在研究中发现的大多数示例都涉及能够使用 express 我正在为翻译而苦苦挣扎。
我的要求:
我只需要一些关于如何解决这个问题的指导。
这是我的 html 文件:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my post form!</title>
</head>
<body>
<div class='container'>
<div class='jumbotron text-center'>
<h1>Please post using this form:</h1>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<form action="http://localhost:3000/thanks" method="POST">
<input name="name" placeholder="enter your name">
<input name="band" placeholder="enter your favorite band">
<button type='submit'>submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
这是我的 server.js 文件和我目前可以使用的文件，但给出了上面显示的输出:
let http = require('http');
let fs = require('fs');
let server = http.createServer(handleRequest);
const port = process.env.PORT || 3000;
function handleRequest(req, res) {
var path = req.url;
if (req.method === "GET"){
res.writeHead(200, {"Content-Type": "text/html"});
fs.createReadStream("postalServiceHTML.html", "UTF-8").pipe(res);
} else if (req.method === "POST" && path == '/thanks'){
var body = "";
req.on("data", function(chunk){
body += chunk;
});
}
req.on("end", function(){
res.writeHead(200, {"Content-Type": "text/html"})
res.end(`
<!DOCTYPE HTML>
<html>
<head>
<title> Form Results </title>
</head>
<body>
<h1> Your Form Results </h1>
<p> Your name is: ${body} </p>
<p> Your favorite band is: ${body} </p>
</body>
</html>
`);
});
}
server.listen(port, () => console.log(Server is running on port ${port}));
最佳答案
让我展示工作版本:
postalServiceHTML.html - 未更改
服务器 - 小改动:
var qs = require('qs');
let http = require('http');
let fs = require('fs');
let server = http.createServer(handleRequest);
const port = process.env.PORT || 3000;
function handleRequest(req, res) {
var path = req.url;
if (req.method == "GET") {
res.writeHead(200, { "Content-Type": "text/html" });
fs.createReadStream("postalServiceHTML.html", "UTF-8").pipe(res);
} else if (req.method == "POST" && path == '/thanks') {
var body = "";
req.on("data", function (chunk) {
body += chunk;
});
}
req.on("end", function () {
res.writeHead(200, { "Content-Type": "text/html" })
if(this.method == "POST") {
var json = qs.parse(body);
res.end(`<!DOCTYPE HTML><html><head><title> Form Results </title></head><body>
<h1> Your Form Results </h1><p> Your name is: ${json.name} </p>
<p> Your favorite band is: ${json.band} </p></body></html>`);
}
});
}
server.listen(port, () => console.log(`Server is running on port ${port}`));
可以使用 qs 吗？它也被 body-parser 使用。
如果你有像这里这样的简单值并且不关心发送一些错误输入的尝试，你可以将它作为一个单一的目的，例如:
var body = "name=John+Doe&band=The+Who%26Escape+test";
var strigified = '{' + body.replace(/([^=&]+)=/g, '"$1"='). // "name"=John+Doe&"band"=The+Who
replace(/=([^&=]+)[&]*/g, ':"$1",'). // "name":"John+Doe","band":"The+Who",
replace(/\+/g, ' '). // "name":"John Doe","band":"The Who",
replace(/,$/g,'') + // "name":"John Doe","band":"The Who"
'}';
var json = JSON.parse(unescape(strigified));
console.log(JSON.stringify(json, null, 2));关于javascript - 从没有 express 的形式转换 body 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57979312/