jQuery AJAX 實現頁面部分刷新：保留已勾選複選框數據

需求場景

頁面展示一個帶複選框的表格，用戶勾選部分行後點擊「抽取」按鈕，要求：

• 已勾選行的數據與勾選狀態保持不變
• 未勾選行重新從後端獲取最新數據並替換

核心思路

1. 遍歷所有 <input type="checkbox">，區分「已勾選」與「未勾選」兩組
2. 將未勾選行的主鍵 ID 拼接為字符串或 JSON 數組，通過 $.post() 發送給後端
3. 後端返回對應行的最新 HTML 片段或 JSON 數據
4. 前端用 replaceWith() 逐行替換未勾選的 <tr> 節點

關鍵代碼實現

1. 前端邏輯

function extractUnchecked() {
  const uncheckedIds = [];
  $('input[name="rowCheckbox"]:not(:checked)').each(function() {
    uncheckedIds.push($(this).val());
    // 保存當前行引用，稍後替換
    $(this).data('trRef', $(this).closest('tr'));
  });

  if (uncheckedIds.length === 0) return;

  $.post('/api/refreshRows', { ids: uncheckedIds.join(',') }, function(res) {
    // 假設後端按順序返回 HTML 字符串數組
    res.data.forEach((html, idx) => {
      const $tr = $('input[name="rowCheckbox"]:not(:checked)').eq(idx).closest('tr');
      $tr.replaceWith(html);
    });
  }, 'json');
}

2. 後端接口示例

@PostMapping("/refreshRows")
public Result> refreshRows(@RequestParam String ids) {
    List idList = Arrays.stream(ids.split(","))
                              .map(Long::valueOf)
                              .collect(Collectors.toList());
    List entities = service.getByIds(idList);
    List htmlRows = entities.stream()
        .map(e -> "<tr><td>" + e.getName() + "</td>...</tr>")
        .collect(Collectors.toList());
    return Result.ok(htmlRows);
}

圖片資源引用

頁面結構參考圖：

常見坑點提示

• ⚠️ 替換後需重新綁定事件（建議用事件委託 $(document).on('click', ...)）
• ⚠️ 若表格含分頁，需同步更新分頁組件狀態
• ⚠️ 大量行替換時考慮 DocumentFragment 或虛擬列表優化性能

總結

通過「前端分組 → 異步請求 → 精準替換」三步走，即可實現無刷新局部更新且保留用戶操作狀態，體驗流暢且代碼簡潔。