JSP + AJAX 實現 Checkbox 多選框動態增刪：DOM 操作、XMLHttpRequest 傳輸與中文編碼處理

本範例展示 JSP + AJAX + 文字檔儲存實現 Checkbox 多選框的多選、全選、新增、刪除、更新功能，涵蓋前端 DOM 動態操作、XMLHttpRequest 非同步傳輸、後端 JSP 檔案讀寫與中文編碼處理。

技術棧與環境

• 前端：JavaScript (DOM 動態建立元素、事件綁定)
• 傳輸：XMLHttpRequest (AJAX)，僅傳遞 ID 或表單值，節省頻寬
• 後端：JSP (檔案讀寫/更新，UTF-8/GBK 編碼轉換)
• 儲存：文字檔 (JSON/自訂格式)
• 驗證環境：Win32 / Red Hat Linux 9，JDK 1.5，Tomcat 5.0，Apache 2.5，Firefox 1.0 / Opera 8.0 / IE6

核心功能模組

前端 JavaScript 關鍵片段

// 動態新增 checkbox
function addCheckbox(text) {
  var div = document.createElement('div');
  var cb = document.createElement('input');
  cb.type = 'checkbox'; cb.value = text;
  var label = document.createElement('label');
  label.appendChild(document.createTextNode(text));
  div.appendChild(cb); div.appendChild(label);
  document.getElementById('container').appendChild(div);
}

// AJAX 送出
function saveData() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'save.jsp', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('data=' + encodeURIComponent(JSON.stringify(getAllData())));
}

後端 JSP 儲存邏輯

<%@ page contentType="text/html;charset=UTF-8" %>
<%
  String data = request.getParameter("data");
  // 中文 OS 可能需轉碼
  // data = new String(data.getBytes("ISO-8859-1"), "GBK");
  java.io.FileWriter fw = new java.io.FileWriter("data.txt", false);
  fw.write(data);
  fw.close();
%>

優缺點分析

優點

• 即時 DOM 操作，使用者體驗佳
• AJAX 輕量傳輸，頻寬極低
• 程式碼簡潔，模組可重用
• 解決中文檔案編碼問題
• 豐富註解，適合入門學習

缺點

• 維護除錯較繁瑣（vs 直接 iframe 嵌入）
• 程式碼未深度優化，存在冗餘
• 互動設計未深入打磨，側重技術實現

原始碼下載

點擊下載完整原始碼（含 JSP、JS、CSS、測試資料）

此範例適合學習 AJAX 非同步互動、DOM 動態操作與 JSP 檔案儲存的基礎整合模式。