Jas*_*n C 3 html javascript node.js express body-parser
我有一个带有一系列复选框的HTML表单(使用[]命名).我需要能够用express来处理它.我正在使用身体解析器.
问题是未经检查的复选框不提交值,同时,正文解析器似乎通过简单地按索引的顺序将值打包到数组中来删除数组中的"漏洞",但忽略了索引本身.(更新:实际上看起来qs是罪魁祸首).
考虑这个完整的示例,它显示一个表单并使用提交数据的JSON转储进行响应:
安装:
npm install express body-parser
index.js:
var express = require("express");
var site = express();
site.use(require("body-parser").urlencoded({extended:true}));
site.get("/", function (req, res) {
res.sendFile(__dirname + "/test.html");
});
site.post("/form", function (req, res) {
res.json(req.body);
});
site.listen(8081);
的test.html:
<html>
<body>
<form method="post" action="/form">
<input type="checkbox" name="option[0]" value="1">
<input type="checkbox" name="option[1]" value="1">
<input type="checkbox" name="option[2]" value="1"><br>
<input type="text" name="text[0]"><br>
<input type="text" name="text[1]"><br>
<input type="text" name="text[2]"><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
在该示例中,如果我只检查option[1],我通过检查Chrome中的请求验证索引是否设置正确,正文是:
option[1]:1
text[0]:
text[1]:
text[2]:
然而,body-parser折叠option数组并产生以下内容req.body:
{"option":["1"],"text":["","",""]}
如你所见,text有三个,但option只有一个项目.同样的,如果我是检查option[0]和option[2],请求主体将如下所示:
option[0]:1
option[2]:1
text[0]:
text[1]:
text[2]:
但它将被解析为:
{"option":["1","1"],"text":["","",""]}
我丢失了有关选中哪个复选框的所有信息.
我的问题是,我该怎么做？我想要发生的是,例如:
随着checkbox[1]检查:
{"option":[null,"1",null],"text":["","",""]}
用checkbox[0]和checkbox[2]检查:
{"option":["1",null,"1"],"text":["","",""]}
我实际上null并没有结婚"1",我只需要虚假和真实.
此外,重要的是我不会丢失有关阵列中应该有多少复选框的信息.例如,如果我给每个复选框一个唯一的值,我想我可以转换"option":["0","1"]成一个布尔值数组,除了我会失去数组大小为3的知识(在这种情况下第三个值为false) - - 虽然我想我可以添加例如隐藏的输入numberOfCheckboxes=3,但是......这种映射很麻烦,如果可能的话我想避免使用它.
我的方法在客户端不需要javascript.添加与具有相同名称的复选框一样多的隐藏字段
body解析器将已检查的项解析为数组,并将其他字符串解析
我的意思是
<input type="hidden" name="option[0]" value="0">
<input type="hidden" name="option[1]" value="0">
<input type="hidden" name="option[2]" value="0">
<input type="checkbox" name="option[0]" value="1">
<input type="checkbox" name="option[1]" value="1">
<input type="checkbox" name="option[2]" value="1">
如果选中[1]选项,那么正文解析器会像解析它一样
{option:['0', ['0', '1'], '0']}
这是修饰语
req.body.option = req.body.option.map(item => (Array.isArray(item) && item[1]) || null);
所以现在身体将会是
{option: [null, '1', null]}