jQuery ajax - serializeArray() روش

jQuery Ajax مرجع کتاب

مثال

نتایج سلسله مراتب شده فرم را به صورت آرایه‌ای چاپ کنید:

$("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 object بازمی‌گرداند، نه یک JSON string. برای تبدیل به string، نیاز به استفاده از افزونه یا کتابخانه سوم‌شده دارید.

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 + " ");
});

jQuery Ajax مرجع کتاب