单Ajax请求携多组数据VS循环发百次单请求：最佳实践问询

嘿，这个问题问得很接地气！毫无疑问，发送携带完整数据集的单个Ajax请求是远优于循环发送100次请求的最佳实践，下面给你拆解清楚原因，再结合你的Bootstrap表格场景给点实现思路：

为什么单个请求更好？ #

• 性能与服务器友好性：100次请求会产生100次TCP握手、重复的HTTP头部开销，服务器还要反复创建和销毁请求上下文，这对前端加载速度和后端资源消耗都是双重浪费。单个请求能把这些额外开销降到最低，哪怕是并发用户较多的场景，也能保持更稳定的性能。
• 数据一致性保障：单个请求可以做原子性处理——要么所有修改都成功保存，要么全部失败回滚。如果用循环请求，很容易出现“部分成功部分失败”的尴尬情况，比如前50条保存成功，后50条失败，这时候数据就会出现不一致，后续修复起来非常麻烦。
• 代码可维护性：单个请求的逻辑更集中，你只需要处理一次请求的成功/失败回调；而循环请求要逐个处理每个请求的状态，还要考虑请求顺序、失败重试等问题，代码会变得臃肿且容易出bug。

结合你的场景的实现思路 #

你的Bootstrap表格有data-*属性标记行列信息，刚好可以用来高效收集数据：

1. 收集所有修改的字段数据 #

遍历页面上的可编辑输入框，通过单元格的data属性获取行列标识，把数据整合成一个数组：

// 只收集有修改的输入（可以给修改过的单元格加个类，比如.edited）
const updatedRecords = [];
$('td.edited input').each(function() {
  const $parentCell = $(this).closest('td');
  updatedRecords.push({
    rowId: $parentCell.data('row-id'),
    columnName: $parentCell.data('column-key'),
    newValue: $(this).val()
  });
});

小技巧：如果用户编辑了单元格，可以在编辑完成时给单元格加上.edited类，这样不用遍历所有100个输入，只收集真正修改过的数据，进一步减少传输量。

2. 发送单个批量请求 #

把收集到的数组通过JSON格式发送给后端控制器：

$.ajax({
  url: '/api/batch-update-table',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(updatedRecords),
  success: function(res) {
    // 处理成功逻辑，比如移除.edited类、提示保存成功
    $('td.edited').removeClass('edited');
    alert('所有修改已成功保存！');
  },
  error: function(xhr) {
    // 处理失败逻辑，比如提示错误信息
    alert(`保存失败：${xhr.responseJSON?.message || '未知错误'}`);
  }
});

3. 后端控制器处理 #

后端接收这个数组后，用事务包裹数据库操作（比如MySQL的BEGIN/COMMIT，或者ORM框架的事务机制），确保所有修改要么全成，要么全败。这样能彻底避免数据不一致的问题。

内容的提问来源于stack exchange，提问作者Frédéric Marcotte Piché