node.js - Pug (RIP Jade) 表单复选框 - 无论选择多少，只返回一个值

Question

我有一个用 Pug 编写的表单。我从表单的 POST 中获取了所有正确的参数，除了我的复选框数组是一个包含一个值的字符串——最近选择的一天。每个复选框都有一个等于数组的名称，因此表单应该返回所有选中的复选框。然而，这并没有发生。

下面是复选框选择的相关代码:

form#create-shift-form(action='/shifts/new', method='post')
  div.form-group
    p Select which days this shift should apply:
      div.checkbox-inline
        input.checkbox-input#create-shift-mon(type='checkbox', name='days[]', value='Mon')
        label(for='create-shift-mon') Mon
      div.checkbox-inline
        input.checkbox-input#create-shift-tue(type='checkbox', name='days[]', value='Tue')
        label(for='create-shift-tue') Tue
      div.checkbox-inline
        input.checkbox-input#create-shift-wed(type='checkbox', name='days[]', value='Wed')
        label(for='create-shift-wed') Wed
      div.checkbox-inline
        input.checkbox-input#create-shift-thur(type='checkbox', name='days[]', value='Thur')
        label(for='create-shift-thur') Thur
      div.checkbox-inline
        input.checkbox-input#create-shift-fri(type='checkbox', name='days[]', value='Fri')
        label(for='create-shift-fri') Fri
      div.checkbox-inline
        input.checkbox-input#create-shift-sat(type='checkbox', name='days[]', value='Sat')
        label(for='create-shift-sat') Sat
      div.checkbox-inline
        input.checkbox-input#create-shift-sun(type='checkbox', name='days[]', value='Sun')
        label(for='create-shift-sun') Sun

为什么没有在表单的 POST 中捕获所有选中的复选框值？为什么它只返回最后一个选定值的字符串而不是所有选定值，这是预期的 HTML 行为？

如果有帮助，我的 Node/Express 服务器已设置为使用以下行解析内容:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

根据 this W3C Spec ，我应该能够给每个复选框输入相同的名称，它们将在 POST 时被解析为一个值数组(参见规范中的示例 2)。我也试过这个，这导致了与我的问题相同的行为 - 只返回最后选择的项目，并且作为字符串，而不是数组。

更新:我上面代码的原始设置是正确的。只需为每个属性的 name 字段指定相同的名称，即可将响应组装到一个数组中。我设置了middleware我忘记了将阻止数组响应作为一种安全措施。删除该库，或将此表单 POST 发送到的路由列入白名单，允许原始代码正常工作。

Answer 1

经过一番研究，我发现:

这种传递数组的方法在很大程度上取决于服务器，它如何理解数据有效负载，PHP 理解这种语法，但 JSON 对象的处理方式不同。

form#create-shift-form(action='/shifts/new', method='post')
  div.form-group
    p Select which days this shift should apply:
      each val, index in ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
        div.checkbox-inline
          input.checkbox-input(type='checkbox', name=`days[${index}]`, value=val, id=`create-shift-${val}`)
          label(for=`create-shift-${val}`)=val

这将有效载荷将等同于这样的东西:

days[0]=Mon
days[1]=Tue
days[2]=Wed
days[3]=Thur
days[4]=Fri
days[5]=Sat
days[6]=Sun

这相当于 json 中的这个有效载荷:

{
   days: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
}

来源:https://darobin.github.io/formic/specs/json/

更新:

供将来引用:OP 解决了这个问题，解决方案 (days[${index}]) 是正确的，但是 express body parser extended:true 使用 querystring 代替qs。

使用 extended:false，JSON 将按预期运行。负载变为 "days[0]"="Mon", "day[1]"="Tues", etc.

app.use(bodyParser.urlencoded({ extended: false }); //instead of true