Servlet 接收前端陣列資料實作批量修改：JS 陣列傳遞至後端的正確姿勢

問題場景

錯誤前端代碼分析

var formtwo = "<form method='post' action='UpDate_Servlet' name='forms'>";
for (i=0; i<a.length; i++) {
    formtwo += "<input name='d' value='"+a[i]+"'>"; // 同名輸入框產生陣列
}
formtwo += "</form>";
document.all.xkswl.innerHTML = formtwo; // 僅插入 HTML 字串，未綁定真實表單 DOM
document.forms.submit(); // 提交的是頁面原有第一個 form，非動態生成者

核心問題

1. innerHTML 插入字串不會建立可提交的 HTMLFormElement 物件。
2. document.forms.submit() 預設提交文件中第一個 <form>，而非動態生成者。

正確實作方案

方案一：隱藏表單 + 原生 JS（最接近原碼修正）

// 頁面預留隱藏表單
<form id="batchForm" method="post" action="UpDate_Servlet" style="display:none"></form>

function submitBatch(dataArray) {
    const form = document.getElementById('batchForm');
    form.innerHTML = ''; // 清空舊欄位
    dataArray.forEach(item => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'd';
        input.value = item.join('|'); // 或 JSON.stringify(item)
        form.appendChild(input);
    });
    form.submit(); // 直接提交該表單
}

方案二：AJAX + JSON（現代標準做法）

fetch('UpDate_Servlet', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(dataArray)
}).then(res => res.text()).then(console.log);

後端 Servlet 用 request.getReader() 讀取 JSON 流，配合 Jackson/Gson 反序列化為 List<YourDTO>。

後端接收陣列參數

// 方案一對應
String[] arr = request.getParameterValues("d"); // 取得 String[]
// 方案二對應
BufferedReader reader = request.getReader();
List list = new Gson().fromJson(reader, new TypeToken>(){}.getType());

總結

• 動態產生表單元素請用 DOM API，勿用字串拼接 innerHTML。
• 優先採用 AJAX + JSON，前後端分離、除錯容易、支援複雜物件結構。