本文由 资源共享网 – ziyuan 发布，转载请注明出处，如有问题请联系我们！jquery表单序列化插件serializeJSON.js

安装

把serializeJSON.js放到网站目录下直接调用即可。务必确保先调用jquery库文件。例如：

• <script type="text/javascript" src="jquery.js"></script>

• <script type="text/javascript" src="jquery.serializeJSON.js"></script>

使用示例

HTML表单

• <form>

•   <input type="text" name="title" value="Finding Loot"/>

•   <input type="text" name="author[name]" value="John Smith"/>

•   <input type="text" name="author[job]" value="Legendary Pirate"/>

• </form>

JavaScript：

• $('form').serializeJSON();

• 
  

• // returns =>

• {

•   title: "Finding Loot",

•   author: {

•     name: "John Smith",

•     job: "Legendary Pirate"

•   }

• }

支持表单 input, textarea 和 select 标签，嵌套属性和数组可以使用 attr[nested][nested] 语法来声明。

HTML表单

• <form id="my-profile">

• <!-- simple attribute -->

• <input type="text" name="fullName" value="Mario Izquierdo" />

• 
  

• <!-- nested attributes -->

• <input type="text" name="address[city]" value="San Francisco" />

• <input type="text" name="address[state][name]" value="California" />

• <input type="text" name="address[state][abbr]" value="CA" />

• 
  

• <!-- array -->

• <input type="text" name="jobbies[]" value="code" />

• <input type="text" name="jobbies[]" value="climbing" />

• 
  

• <!-- nested arrays, textareas, checkboxes ... -->

• <textarea name="projects[0][name]">serializeJSON</textarea>

• <textarea name="projects[0][language]">javascript</textarea>

• <input type="hidden" name="projects[0][popular]" value="0" />

• <input type="checkbox" name="projects[0][popular]" value="1" checked />

• 
  

• <textarea name="projects[1][name]">tinytest.js</textarea>

• <textarea name="projects[1][language]">javascript</textarea>

• <input type="hidden" name="projects[1][popular]" value="0" />

• <input type="checkbox" name="projects[1][popular]" value="1"/>

• 
  

• <!-- select -->

• <select name="selectOne">

•   <option value="paper">Paper</option>

•   <option value="rock" selected>Rock</option>

•   <option value="scissors">Scissors</option>

• </select>

• 
  

• <!-- select multiple options, just name it as an array[] -->

• <select multiple name="selectMultiple[]">

•   <option value="red" selected>Red</option>

•   <option value="blue" selected>Blue</option>

•   <option value="yellow">Yellow</option>

• </select>

• </form>

JavaScript：

• $('#my-profile').serializeJSON();

• 
  

• // returns =>

• {

•   fullName: "Mario Izquierdo",

• 
  

•   address: {

•     city: "San Francisco",

•     state: {

•       name: "California",

•       abbr: "CA"

•     }

•   },

• 
  

•   jobbies: ["code", "climbing"],

• 
  

•   projects: {

•     '0': { name: "serializeJSON", language: "javascript", popular: "1" },

•     '1': { name: "tinytest.js", language: "javascript", popular: "0" }

•   },

• 
  

•   selectOne: "rock",

•   selectMultiple: ["red", "blue"]

• }

serializeJSON返回一个JavaScript对象，而不是一个JSON字符串。

要转换为JSON字符串，可以使用JSON.stringify方法。

• var obj = $('form').serializeJSON();

• var jsonString = JSON.stringify(obj);

插件的实现依赖于jquery的.serializeArray()方法。这意味着它只序列化.serializeArray()支持的输入，尤其是，所包含的元素不能被禁用，并且必须包含name属性。由于没有使用按钮提交表单，因此没有序列化提交按钮值。文件选择（file select）元素中的数据不能序列化。