jQuery ajax - serializeArray() phương pháp

Hướng dẫn tham khảo Ajax jQuery

Mô hình

Xuất ra kết quả đã được序列 hóa dưới dạng mảng biểu mẫu:

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

Thử ngay

Định nghĩa và cách sử dụng

serializeArray() phương pháp thông qua việc序列 hóa giá trị biểu mẫu để tạo ra mảng đối tượng (tên và giá trị).

Bạn có thể chọn một hoặc nhiều yếu tố biểu mẫu (ví dụ như input và/hoặc textarea), hoặc biểu mẫu本身.

Cú pháp

$(ký tự chọn).serializeArray()

Mô tả chi tiết

serializeArray() phương pháp序列 hóa yếu tố biểu mẫu (giống .serialize() phương pháptrả về cấu trúc dữ liệu JSON dữ liệu.

Lưu ý:Phương pháp này trả về JSON đối tượng thay vì JSON chuỗi. Cần sử dụng plugin hoặc thư viện thứ ba để hoạt động chuỗi hóa.

JSON đối tượng trả về được tạo thành từ một mảng đối tượng, mỗi đối tượng chứa một hoặc hai cặp tên giá trị - tham số name và tham số value (nếu value không trống). Ví dụ:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // giá trị trống
]

.serializeArray() phương pháp sử dụng W3C về controls thành côngtheo tiêu chuẩn của (điều khiển hợp lệ) để xác định哪些元素 nên được bao gồm. Đặc biệt lưu ý, các yếu tố không thể bị vô hiệu hóa (các yếu tố bị vô hiệu hóa sẽ không được bao gồm), và các yếu tố nên có thuộc tính name.

Cách này có thể hoạt động với các đối tượng biểu mẫu được chọn riêng lẻ, chẳng hạn như <input>, <textarea> và <select>. Tuy nhiên, cách dễ dàng hơn là chọn thẳng <form> thẻ để thực hiện thao tác序列 hóa. 

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

Mã trên tạo ra cấu trúc dữ liệu sau (giả sử trình duyệt hỗ trợ console.log):

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

Mẫu

Lấy nội dung biểu mẫu và chèn vào trang web:

Mã HTML:

<p id="results"><b>Kết quả:</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>

Mã jQuery:

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

Hướng dẫn tham khảo Ajax jQuery