jQuery ajax - serializeArray() 方法

实例

输出以数组形式序列化表单值的结果:

$("button").click(function(){
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  });
});

亲自试一试

定义和用法

serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

语法

$(selector).serializeArray()

详细说明

serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

.serializeArray() 方法使用了 W3C 关于 successful controlsເປັນກົດລະບຽບຂອງ (ກົດລະບຽບທີ່ມີຜົນ) ເພື່ອກວດສອບບັນດາປະກອບທີ່ຄວນບັນຈຸໄວ້ພາຍໃນ。ສະເພາະກ່າວວ່າປະກອບບໍ່ຄວນຖືກລະງັບ (ປະກອບທີ່ຖືກລະງັບຈະບໍ່ບັນຈຸໄວ້ພາຍໃນ) ແລະປະກອບຄວນມີຄວາມຊື່ວ່າ name。ຄວາມມູນຂອງຄະຕິນສົ່ງສານຈະບໍ່ບັນຈຸໄວ້ພາຍໃນ。

ການນຳໃຊ້ນີ້ສາມາດດຳເນີນການໃນບັນດາປະກອບອອກບົດສະຫຼຸບທີ່ໄດ້ເລືອກອອກມາເອງຂອງຟອມແບບການສະໜອງຂໍ້ມູນ ເຊັ່ນ <input>, <textarea>, ແລະ <select>。ແຕ່ວ່າການນຳໃຊ້ທີ່ຫຼາຍຫຼາຍຫຍັງແມ່ນຕິດຕາມ <form> ຕາມບັນດາກົດລະບຽບເພື່ອການສະຫຼຸບຂໍ້ມູນ。

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
});

ວຽກການກ່າວຫາການລະບຸຂໍ້ມູນດ້ານດຽວກັນທີ່ລະບຸທີ່ລາວຄວນມີ (ກໍາລັງກວດກາ console.log):

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

ຕົວຢ່າງ

ຄົ້ນພົບຂໍ້ມູນຟອມຂໍ້ມູນແລະເພີ່ມເຂົ້າໃນເວັບໄຊ:

HTML 代码:

<p id="results"><b>Results:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 代码:

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});