如何将数组从View传递到Controller？附当前实现代码

嘿，我看你现在是想把网站数组从视图传到控制器，当前的写法虽然能跑起来，但后端处理的时候得挨个取website0、website1这类单独命名的字段，再手动拼成数组，有点麻烦。我给你两种更简洁高效的实现方式：

方法一：使用数组格式的input name属性 #

这是最直接的表单提交方式，只需要把每个输入框的name改成websites[]，后端就能直接拿到完整的数组：

<form method="post">
  <% for(let i = 0; i < websites.length; i++){ 
    let website = websites[i]; 
  %>
    <fieldset>
      <label for="website<%= i %>" class="col-sm-2">Website <%= i + 1 %></label>
      <input name="websites[]" id="website<%= i %>" value="<%= website %>" type="text"/>
    </fieldset>
  <% } %>
  <button class="btn btn-primary col-sm-offset-2" type="submit">提交</button>
</form>

后端接收示例 #

• 如果是Node.js/Express：确保你已经用了express.urlencoded()中间件，然后直接通过req.body.websites获取数组
• 如果是PHP：直接用$_POST['websites']就能拿到数组
• 其他后端框架也基本都支持这种数组格式的表单参数，不用额外处理单个字段

方法二：AJAX提交JSON格式（适合异步场景） #

如果不想刷新页面提交，可以用JavaScript收集输入值成数组，转成JSON发送给后端：

<form id="websiteForm" method="post">
  <% for(let i = 0; i < websites.length; i++){ 
    let website = websites[i]; 
  %>
    <fieldset>
      <label for="website<%= i %>" class="col-sm-2">Website <%= i + 1 %></label>
      <input class="website-input" id="website<%= i %>" value="<%= website %>" type="text"/>
    </fieldset>
  <% } %>
  <button class="btn btn-primary col-sm-offset-2" type="submit">提交</button>
</form>

<script>
document.getElementById('websiteForm').addEventListener('submit', function(e) {
  // 阻止表单默认刷新行为
  e.preventDefault();
  
  // 收集所有输入框的值组成数组
  const websites = Array.from(document.querySelectorAll('.website-input'))
    .map(input => input.value.trim());
  
  // 发送POST请求
  fetch('/your-controller-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ websites }),
  })
  .then(res => res.json())
  .then(data => {
    console.log('提交成功:', data);
    // 这里可以加成功后的页面逻辑，比如提示、清空表单等
  })
  .catch(err => {
    console.error('提交失败:', err);
  });
});
</script>

后端接收示例（Node.js/Express） #

先确保启用express.json()中间件：

const express = require('express');
const app = express();
app.use(express.json()); // 解析JSON格式的请求体

app.post('/your-controller-endpoint', (req, res) => {
  const websites = req.body.websites;
  // 处理数组逻辑...
  res.json({ success: true, data: websites });
});

当然，你原来的写法也能正常工作，只是需要后端循环遍历每个website${i}字段来组装数组，相对来说没那么高效。上面两种方法能让前后端的处理都更简洁~

内容的提问来源于stack exchange，提问作者Alex Ironside