如何生成可通过AJAX提交的多维JavaScript数组

核心问题说明 #

你之前用数组存储数据是错误的——数组只能用数字索引，而你需要用Client ID和trener_id作为字符串键，必须用普通对象来构建结构，这样才能正确序列化并通过AJAX提交。

正确的数据结构示例 #

最终生成的结构应该是嵌套对象+数组的组合，示例如下：

{
  "client_1001": {
    "trener_2001": [
      { "service_id": 3001, "client_price": 150, "trener_bonus": 30 },
      { "service_id": 3002, "client_price": 200, "trener_bonus": 40 }
    ],
    "trener_2002": [
      { "service_id": 3003, "client_price": 180, "trener_bonus": 35 }
    ]
  },
  "client_1002": {
    "trener_2001": [
      { "service_id": 3004, "client_price": 120, "trener_bonus": 25 }
    ]
  }
}

修正后的代码实现 #

假设你的表格选中行带有.selected-service类，且数据通过data-*属性或表单控件存储：

// 初始化空对象存储最终数据
const clientServiceData = {};

// 遍历所有选中的服务行
document.querySelectorAll('.selected-service').forEach(row => {
  // 从行中提取所需数据（根据你的实际DOM结构调整取值方式）
  const clientId = row.dataset.clientId; // 对应data-client-id属性
  const trenerId = row.dataset.trenerId; // 对应data-trener-id属性
  const serviceId = parseInt(row.querySelector('[name="service_id"]').value);
  const clientPrice = parseFloat(row.querySelector('[name="client_price"]').value);
  const trenerBonus = parseFloat(row.querySelector('[name="trener_bonus"]').value);

  // 确保当前客户的对象存在
  if (!clientServiceData[clientId]) {
    clientServiceData[clientId] = {};
  }

  // 确保当前教练的服务数组存在
  if (!clientServiceData[clientId][trenerId]) {
    clientServiceData[clientId][trenerId] = [];
  }

  // 将当前服务信息推入对应数组
  clientServiceData[clientId][trenerId].push({
    service_id: serviceId,
    client_price: clientPrice,
    trener_bonus: trenerBonus
  });
});

// 序列化为JSON字符串
const submitData = JSON.stringify(clientServiceData);

// AJAX提交（jQuery示例）
$.ajax({
  url: '/your-submit-endpoint',
  method: 'POST',
  data: submitData,
  contentType: 'application/json', // 必须设置这个头部，服务器才能正确解析JSON
  success: function(res) {
    // 处理成功逻辑
    console.log('提交成功', res);
  },
  error: function(xhr) {
    // 处理错误逻辑
    console.error('提交失败', xhr.responseText);
  }
});

关键注意点 #

• 不要用数组存储Client ID或trener_id对应的键值对，必须用普通对象。
• AJAX提交时必须设置contentType: 'application/json'，否则服务器可能无法识别JSON格式的请求体。
• 确保所有数值类型数据（如service_id、价格）转换为正确的类型（数字），避免序列化后变成字符串。

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