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

有時候前端表單要填寫的欄位很多，可是資料庫只有一個欄位要存所有的值在裡面那要怎麼做比較好呢？

這部分有不少的解法，可以用JS把表單欄位的值都存成變數，在將需要的值組起來再塞到指定的表單欄位中傳回資料庫，另外一種做法就是將這些欄位的值存成JSON格式存到資料庫欄位中，方便之後取值的時候可以依照自己的喜好做排版呈現。

將表單欄位的值變成變數再組合起來的做法

先將要送出的欄位做隱藏，不要顯示出來給用戶填寫。

接著將這些欄位以變數的方式取值，再將這些變數拼組成想要存到欄位中的排列即可。

範例code如下：

試著填入資料在按完成送出，會將結果顯示到下方，這邊顯示的就是剛剛組合出來的字串囉。

那我要怎麼將組合好的字串存到表單欄位呢？這時候只需要使用jQuery的.val() 就可以囉！

$('#name').val(result); 這樣就可以把剛剛組合出來的字串寫入name欄位中了。

 

See the Pen 表單欄位組合 by terry (@linpig) on CodePen.

 

使用JSON.stringify 將表單的資料轉存成JSON格式的做法

一樣也是將送出的欄位做隱藏，不要顯示出來給用戶填寫。

這部分的方式就是先宣告一個[](陣列) ，在宣告一個{} (物件)之後把每個欄位的值都存到item這個物件中，再利用jsonObj.push(item);的方式將item裡面的物件傳入陣列中，接著使用JSON.stringify(jsonObj);將陣列的資料轉成JSON格式存到剛剛隱藏的欄位中，這時表單送出時欄位裡面就是存JSON格式的值送到後端資料庫存起來，方便之後取值的時候使用。

範例code如下：

試著填入資料在按完成送出，會將結果顯示到下方，這邊顯示的就是JSON格式的數據囉。

那我要怎麼將組合好的字串存到表單欄位呢？這時候一樣也是使用jQuery的.val() 就可以囉！

$('#name').val(JSON.stringify(jsonObj)) 這樣就可以把剛剛的JSON資料寫入name欄位中了。

See the Pen oGRJmG by terry (@linpig) on CodePen.