使用 JSON.stringify 將表單資料轉存為 JSON 格式的技術筆記

前言

在前端開發中，常遇到表單欄位眾多，但後端資料庫只設計一個欄位存放所有資料的情況。這時候如何有效整理並傳送這些資料成為一個重要課題。本文適合有基礎程式能力的工程師或自學者，說明如何利用 JavaScript 將多個表單欄位資料組合成字串或 JSON 格式，並存入隱藏欄位，方便後端存取。

將表單欄位值組合成字串的做法

  1. 隱藏欄位設定：先在表單中加入一個隱藏欄位，用來存放組合後的字串。

  2. 取值並組合：使用 JavaScript 取得各個欄位的值，存成變數後，依需求拼接成想要的字串格式。

  3. 寫入隱藏欄位：利用 jQuery 的 .val() 方法，將組合好的字串寫入隱藏欄位。

var val1 = $('#field1').val();
var val2 = $('#field2').val();
var result = val1 + '-' + val2; // 自訂組合格式
$('#hiddenField').val(result);

這樣送出表單時，隱藏欄位就會帶著組合好的字串，後端可直接存取。

使用 JSON.stringify 將表單資料轉成 JSON 格式

  1. 隱藏欄位設定：同樣先準備一個隱藏欄位。

  2. 建立物件與陣列：宣告一個空陣列 jsonObj，再建立一個物件 item，將各欄位值存入物件屬性。

  3. 推入陣列並序列化：使用 jsonObj.push(item) 將物件放入陣列，接著用 JSON.stringify(jsonObj) 將陣列轉成 JSON 字串。

  4. 寫入隱藏欄位：同樣用 jQuery .val() 將 JSON 字串寫入隱藏欄位。

var jsonObj = [];
var item = {};
item.name = $('#name').val();
item.email = $('#email').val();
jsonObj.push(item);
$('#hiddenField').val(JSON.stringify(jsonObj));

這樣後端收到的欄位即為 JSON 格式字串，方便後續解析與呈現。

實際應用與延伸

  • 資料庫設計彈性：將多欄位資料存成 JSON，資料庫欄位設計更簡潔，且方便擴充。
  • 前端動態欄位：動態新增欄位時，只需更新物件結構，序列化流程不變。
  • 後端解析：後端可直接解析 JSON 字串，減少欄位對應錯誤。

常見坑點

  • 忘記將隱藏欄位設為 name 屬性，導致資料無法送出。
  • JSON 格式錯誤，導致後端解析失敗。
  • 未同步更新隱藏欄位值，送出資料不完整。

完整程式碼

// 假設有兩個輸入欄位與一個隱藏欄位
$(document).ready(function() {
  $('#submitBtn').click(function(e) {
    e.preventDefault();
    var jsonObj = [];
    var item = {};
    item.name = $('#nameInput').val();
    item.email = $('#emailInput').val();
    jsonObj.push(item);
    $('#hiddenField').val(JSON.stringify(jsonObj));
    // 這裡可繼續送出表單或其他處理
    console.log($('#hiddenField').val());
  });
});
標籤
分享

相關文章