NodeJS对接MySQL开发时如何获取表单提交的multiselect多选值

你当前的代码存在2个核心错误导致后端无法拿到选中值：

• 前端缺少合法的<form>表单标签，method属性放在div标签上不生效，无法触发正常的表单提交逻辑
• <select>标签未添加name属性，表单提交时只会携带拥有name属性的表单字段值，你把name属性写在<option>标签上无效；且多选下拉的name需要加[]后缀，才能传递选中值数组，否则只会传递最后一个选中的值
• 若你使用Express框架，默认未开启请求体解析，需要手动配置中间件才能读取req.body内容

前端HTML代码 #

<!-- 新增form标签，指定提交地址和提交方式 -->
<form action="/profile" method="POST" class="form-group">
    <br>
    <!-- 给select添加name属性，加[]后缀标识多值 -->
    <select class="form-control multiselect" multiple="multiple" name="team[]">
    {{#team}}
        <option value="{{name}}">{{name}}</option>
    {{/team}}
    </select>
    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">Update Members<i class="icon-circle-right2 ml-2"></i></button>
    </div>
</form>

后端Node.js代码 #

// 配置表单请求体解析中间件，必须放在路由定义之前
app.use(express.urlencoded({ extended: true }))

// 业务路由
router.post('/profile', (req, res)=>{
    // req.body.team即为选中值的数组
    console.log(req.body.team);
})

• 如果你是使用AJAX/axios异步提交表单，需要将多选值封装为数组传递，同时设置请求头Content-Type: application/x-www-form-urlencoded，如果是JSON格式提交需要额外配置express.json()中间件
• 多选值传递到后端后可以直接遍历存入MySQL，不需要额外做格式转换

内容的提问来源于stack exchange，提问作者Utkrisht Agrawal