前端資料傳遞後端：表單隱藏域與 JSON 序列化方案

原始程式碼分析

程式碼透過 jQuery 將表格列資料寫入隱藏輸入框：

$("#u149_input_hidden").val(obj.cells[0].innerHTML);
$("#u178_input").val(obj.cells[1].innerHTML);
$("#u184_input").val(obj.cells[2].innerHTML);

兩種提交方案

方案一：原生表單提交（適合簡單場景）

確保所有輸入框包裹在 <form> 標籤內，設定 action 與 method，點擊提交按鈕即可自動送出所有 name 屬性的欄位。

方案二：JSON 序列化 + AJAX（推薦用於複雜資料）

// 收集資料
var formData = {
    id: $("#u149_input_hidden").val(),
    name: $("#u178_input").val(),
    intro: $("#u184_input").val()
};

// AJAX 送出
$.ajax({
    url: '/api/submit',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(formData),
    success: function(res) { console.log('提交成功'); }
});

進階：多筆資料批次傳遞

var rows = [];
$("table tbody tr").each(function() {
    rows.push({
        id: $(this).find("td:eq(0)").text(),
        name: $(this).find("td:eq(1)").text(),
        intro: $(this).find("td:eq(2)").text()
    });
});
$.post('/api/batch', { data: rows });

安全性提醒

• 後端需驗證與清理所有輸入資料，防止 XSS 與 SQL 注入
• 敏感操作加入 CSRF Token 驗證
• 大量資料考慮分頁或流式傳輸