javascript jquery將表單form序列化成json提交
阿新 • • 發佈：2019-02-15
由於本人剛接觸java就要開始開發專案，用到的東西很多很雜，對javascript以及jquery只是一知半解，只能通過不斷的學習慢慢的補起來了。
由於自己要獨立的開發一個簡單的系統，其中會用到form表單序列化成json後提交，配合服務端spring mvc的@RequestMapping接收。
本以為將form序列化為json是個很通用的東東，隨時都可以搜到，沒想到由於自己對jquery不熟，搜到的東西都不知道該怎麼用，研究了好久才搞懂是怎麼回事。
超級簡單的程式碼
本文要解決的問題：將html中的一個表單序列化成json字串
需要引用：jquery(可以自己下載來放在本地，也可以引用microsoft的jquery內容分發資源）
自己做的擴充套件：寫一個簡單的jquery擴充套件方法。
沒解決的問題：複選框提交的時候如果只選擇了一個的話會導致序列化後不是個列表（自己解決辦法是新增一個隱藏的複選框，在服務端刪掉該屬性。有問題可以留言）
效果：
html程式碼
<html> <head> <title>測試</title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> </head> <body> <form id="mytest"> 姓 名：<input type="text" name = "name" /> </br> 職 業：<input type="text" name = "job" /> <input type="button" onclick="myjson('mytest')" value="測試" /> <br /> <input type="checkbox" name = "interest" value ="1" />複選框1<br /> <input type="checkbox" name = "interest" value ="2" />複選框1<br /> <input type="checkbox" name = "interest" value ="3" />複選框1<br /> <input type="checkbox" name = "interest" value ="4" />複選框1<br /> </form> 顯示最後序列化的結果： <input type="text" id="target" style="width:500px" /> </body> <script> $.fn.serializeJson=function(){ var serializeObj={}; var disabled = $(this).find(':disabled'); disabled.removeAttr('disabled'); var array=this.serializeArray(); disabled.attr('disabled','disabled'); var str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]!=undefined){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; function myjson(str) { var target = $('#mytest').serializeJson(); var s = JSON.stringify(target); document.getElementById("target").value=s; } </script> </html>