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) أو النموذج نفسه.

اللغة

$(محدد).serializeArray()

شرح مفصل

serializeArray() أسلوب سلسلة عناصر النموذج (مثل .serialize() أسلوب)، وتقديم بيانات بنية JSON.

ملاحظة:يُرجع هذا الأسلوب جسم JSON وليس سلسلة JSON. تحتاج إلى استخدام ملحق أو مكتبة ثالثة للتحويل إلى سلسلة.

النتيجة هي جسم JSON يحتوي على مجموعة من الأجسام، حيث يحتوي كل جسم على أو أكثر من أزواج الأسماء القيم - المعاملات name والقيمة value (إذا كانت القيمة فارغة). على سبيل المثال:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // القيمة فارغة
]

.serializeArray() استخدام W3C حول controls ناجحلتحديد الأنواع القياسية للعناصر التي يجب أن تشملها. يُوضح بشكل خاص، لا يمكن أن تكون العناصر معطلة (لن تشمل العناصر المعطلة) ويجب أن تحتوي على خاصية name.

هذا الأسلوب يمكنه التعامل مع الكائنات التي تم اختيارها بشكل فردي من عناصر النموذج، مثل <input>, <textarea>, و <select>. 

$("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 مرجع