卡卡網(wǎng)

jquery.serializeJSON

serializeJSON.js是一個(gè)jquery的表單序列化插件，能把表單轉(zhuǎn)化為JavaScript對(duì)象。

下載

serializeJSON.js

安裝

把serializeJSON.js放到網(wǎng)站目錄下直接調(diào)用即可。務(wù)必確保先調(diào)用jquery庫(kù)文件。例如：

<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 標(biāo)簽，嵌套屬性和數(shù)組可以使用 attr[nested][nested] 語(yǔ)法來(lái)聲明。

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返回一個(gè)JavaScript對(duì)象，而不是一個(gè)JSON字符串。

要轉(zhuǎn)換為JSON字符串，可以使用JSON.stringify方法。

var obj = $('form').serializeJSON();
var jsonString = JSON.stringify(obj);

插件的實(shí)現(xiàn)依賴于jquery的.serializeArray()方法。這意味著它只序列化.serializeArray()支持的輸入，尤其是，所包含的元素不能被禁用，并且必須包含name屬性。由于沒(méi)有使用按鈕提交表單，因此沒(méi)有序列化提交按鈕值。文件選擇（file select）元素中的數(shù)據(jù)不能序列化。

您可能對(duì)以下文章也感興趣

• JQuery如何把JSON字符串轉(zhuǎn)為JSON對(duì)象

標(biāo)簽: serializeJSON  表單序列化  JQuery  JSON  JSON.stringify