JSP 前端數據收集：原生 JS 封裝表單為 JSON 並跳轉傳遞

代碼功能解析

function submit() {
    var JSONObj = new Object();           // 1. 創建空對象
    var inputs = $("td input");           // 2. jQuery 選擇器獲取所有 td 下的 input
    for (var i = 0; i < inputs.length; i++) { // 3. 遍歷
        JSONObj[inputs[i].name] = inputs[i].value; // 4. 以 name 為鍵，value 為值
    }
    var JSONString = JSON.stringify(JSONObj); // 5. 對象序列化為 JSON 字符串
    window.location.href = "JSONTest.jsp?json=" + encodeURI(encodeURI(JSONString)); // 6. 雙重編碼后跳轉攜帶參數
}

關鍵步驟說明

1. 數據收集：依賴 name 屬性，要求每個 input 唯一且有意義的 name。
2. 序列化：JSON.stringify 將 JS 對象轉為標準 JSON 文本。
3. URL 編碼：encodeURI 兩次是為了防止特殊字符（如 %、+、中文）在傳輸中丟失或被誤解析。接收端需對應解碼两次。
4. 跳轉傳遞：通過 GET 請求將 JSON 字符串作為查詢參數傳給下一頁。

改進建議

• 使用 encodeURIComponent 替代 encodeURI，前者編碼范圍更全（包含 &、= 等查詢參數分隔符）。
• 大數據量建議改用 POST 表單提交或 sessionStorage 暫存，避免 URL 長度限制（~2KB）。
• 現代項目推薦用 fetch/axios 異步提交 JSON，后端直接反序列化。