卡卡网

jquery.serializeJSON

serializeJSON.js是一个jquery的表单序列化插件，能把表单转化为JavaScript对象。

下载

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）元素中的数据不能序列化。

您可能对以下文章也感兴趣

• JQuery如何把JSON字符串转为JSON对象

标签: serializeJSON  表单序列化  JQuery  JSON