如何将表单评分数据转为对象数组并随表单提交至服务器

要实现把评分整理成指定的对象数组并提交，你需要拦截表单的默认提交行为，手动处理评分数据，再把整理好的数据和其他表单字段一起发送给服务器。下面是具体的实现步骤和代码：

1. 给表单添加ID（方便后续操作） #

先给你的表单标签加上一个唯一ID，这样更容易定位和操作表单元素：

<form id="movieForm" action="/create" method="POST">
  <!-- 原表单内的所有输入框、按钮等内容保持不变 -->
</form>

2. 编写表单提交的自定义处理逻辑 #

在现有脚本的末尾，添加表单提交的事件监听，手动处理数据格式：

// 监听表单提交事件
document.getElementById('movieForm').addEventListener('submit', function(e) {
  // 阻止表单默认的提交行为，我们要手动处理数据
  e.preventDefault();

  // 第一步：收集并整理评分数据为要求的数组格式
  const sourceInputs = document.querySelectorAll('[name="ratingsSource"]');
  const valueInputs = document.querySelectorAll('[name="ratingsValue"]');
  const ratingsArray = [];

  // 遍历每一组评分输入框，配对成指定的对象
  for (let i = 0; i < sourceInputs.length; i++) {
    const sourceText = sourceInputs[i].value.trim();
    const valueText = valueInputs[i].value.trim();
    // 只添加有实际内容的评分项，避免空对象
    if (sourceText && valueText) {
      ratingsArray.push({
        Source: sourceText,
        Value: valueText
      });
    }
  }

  // 第二步：收集其他表单数据，并整合评分数组
  const formData = new FormData(this); // this指向当前提交的表单

  // 移除原来单独的评分输入项（因为我们已经整理成数组了）
  sourceInputs.forEach(input => formData.delete(input.name));
  valueInputs.forEach(input => formData.delete(input.name));

  // 把整理好的评分数组转成JSON字符串，添加到FormData中
  formData.append('Ratings', JSON.stringify(ratingsArray));

  // 第三步：发送处理好的数据到服务器
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => {
    if (response.ok) {
      alert('电影已成功添加到收藏！');
      // 重置表单，方便用户继续添加
      this.reset();
      // 可选：跳转到电影列表页面
      // window.location.href = '/your-movie-collection-page';
    } else {
      throw new Error('提交失败，请重试');
    }
  })
  .catch(error => {
    console.error('提交错误:', error);
    alert('提交出错了，请检查输入后重试');
  });
});

额外优化：演员字段的数组处理 #

如果你希望演员也以数组形式提交（毕竟可以添加多个演员输入框），上面的FormData方式在后端（比如Express框架）中，只要配置了extended: true的urlencoded中间件，会自动把多个name="actors"的输入值解析成数组。如果后端需要JSON格式的演员数组，你可以改用JSON格式提交数据：

// 替换第二步和第三步的FormData部分，改用JSON格式提交
const movieData = {};
// 遍历表单所有字段，收集普通输入项
Array.from(this.elements).forEach(elem => {
  if (!elem.name || elem.name === 'ratingsSource' || elem.name === 'ratingsValue') return;
  
  if (elem.name === 'actors') {
    // 收集所有演员输入框的值，过滤空内容
    movieData.actors = Array.from(document.querySelectorAll('[name="actors"]'))
      .map(input => input.value.trim())
      .filter(val => val);
  } else {
    movieData[elem.name] = elem.value.trim();
  }
});
// 添加整理好的评分数组
movieData.Ratings = ratingsArray;

// 发送JSON格式的请求
fetch(this.action, {
  method: this.method,
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(movieData)
})
// 后续的响应处理和之前一致
.then(response => { /* ... */ })
.catch(error => { /* ... */ });

后端注意事项 #

• 如果用FormData方式提交，后端需要将Ratings字段的JSON字符串解析为对象数组（比如Node.js中用JSON.parse(req.body.Ratings)）。
• 如果用JSON方式提交，后端需要配置对应的JSON解析中间件（比如Express中的express.json()）。

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