Javascript Express body解析器处理表单上的复选框数组_Javascript_Html_Node.js_Express_Body Parser

Javascript Express body解析器处理表单上的复选框数组

javascript html node.js express

Javascript Express body解析器处理表单上的复选框数组,javascript,html,node.js,express,body-parser,Javascript,Html,Node.js,Express,Body Parser,我有一个带有复选框数组的HTML表单（使用[]命名）。我需要能够用express处理此问题。我正在使用身体分析器问题是，未选中的复选框不会提交值，同时，主体解析器似乎通过简单地按索引顺序将值打包到数组中，而忽略索引本身，从而消除了数组中的“漏洞”。（更新：实际上它看起来像）考虑这个完整的示例，它显示一个表单，并用提交数据的JSON转储进行响应：安装： npm install express body-parser index.js： var express = require("expr

我有一个带有复选框数组的HTML表单（使用

[]

命名）。我需要能够用express处理此问题。我正在使用身体分析器

问题是，未选中的复选框不会提交值，同时，主体解析器似乎通过简单地按索引顺序将值打包到数组中，而忽略索引本身，从而消除了数组中的“漏洞”。（更新：实际上它看起来像）

考虑这个完整的示例，它显示一个表单，并用提交数据的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>

然而，body解析器会折叠

选项

数组，并在

req.body

中生成以下内容：

{"option":["1"],"text":["","",""]}

如您所见，

text

包含所有三项，但是

选项

只有一项。类似地，如果我选中

选项[0]

和

选项[2]

，请求主体将如下所示：

option[0]:1
option[2]:1
text[0]:
text[1]:
text[2]:

但它将被解析为：

{"option":["1","1"],"text":["","",""]}

我丢失了有关选中哪个复选框的所有信息

我的问题是，我该怎么做？我想做的是，例如：

选中

复选框[1]

后：

{"option":[null,"1",null],"text":["","",""]}

{"option":["1",null,"1"],"text":["","",""]}

选中

复选框[0]

和

复选框[2]

时：

{"option":[null,"1",null],"text":["","",""]}

{"option":["1",null,"1"],"text":["","",""]}

我实际上并没有嫁给

null

和

“1”

，我只需要虚假和真实

另外，重要的是不要丢失有关数组中应包含多少复选框的信息。例如，如果我给每个复选框一个唯一的值，我想我可以将
“option”：[“0”，“1”]
转换成一个布尔值数组，除非我不知道数组的大小是3（在这种情况下，第三个值为false）——尽管我想我可以添加一个隐藏的输入，例如
numberofcheckbox=3
，但是这种映射很麻烦，如果可能的话，我想避免它。
最简单的解决方案（不是最好的）是，您可以添加具有不同ID的隐藏输入，然后在页面上的复选框未选中时选中它们

<input type="checkbox" name="option[0]" value="1"> <input type="checkbox" name="option[1]" value="1"> <input type="checkbox" name="option[2]" value="1"> <input type="checkbox" class="hidden" name="hiddenOption[0]" value="1"> <input type="checkbox" class="hidden" name="hiddenOption[1]" value="1"> <input type="checkbox" class="hidden" name="hiddenOption[2]" value="1">
然后根据这一点，你可以找出哪些没有勾选

我的方法不需要客户端的javascript。添加与同名复选框一样多的隐藏字段
正文解析器将检查项解析为数组和字符串其他项
我是说

<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">
这是修饰符

req.body.option = req.body.option.map(item => (Array.isArray(item) && item[1]) || null);
所以现在身体会

{option: [null, '1', null]}

因此，如果只选中了
选项[1]
，那么它将发布
选项[0]：0，选项[1]：1，选项[2]：0
和
隐藏选项[0]：1，隐藏选项[1]：0，隐藏选项[2]：1
？不过，那是行不通的。它也会有同样的问题。Body parser会将它折叠成
选项：[“1”]，hiddenOption[“1”，“1”]
，我仍然会丢失关于原始数组索引的信息。聪明，简单。我喜欢。如果我能以某种方式阻止主体解析器崩溃数组，那就太好了，但我想我会继续这样做。谢谢它总是按照数组在窗体上的顺序存储数组，对吗？所以永远不会有风险，例如，
['1'，'0']
？虽然这很容易处理，但我可以在
map
函数中检查数组长度是否为2。我认为这取决于隐藏字段的位置。如果您将隐藏字段放在表单开始标记之后或复选框之前，那么yes@JasonC order将是相同的。这既简单又聪明！谢谢，如果有人尝试此操作并遇到错误：无法使用未定义的.map，请从false更改为app.use（bodyParser.urlencoded（{extended:true}））；已公布的相关问题：，
{option: [null, '1', null]}