التابع .serializeArray() في jQuery
.serializeArray()
القيم المعادة
يعيد مصفوفة من النوع Array.
الوصف
يُرمِّز هذا التابع مجموعة من عناصر النماذج ويضعها في مصفوفة على شكل أسماء وقيم من أجل إرسالها.
.serializeArray()
أُضيف مع الإصدار: 1.2. ولا يقبل هذا التابع أية وسائط.
ينشئ التابع .serializeArray() مصفوفة من كائناتٍ قابلةٍ لتكون مرمَّزة بصيغة JSON. يمكن تطبيقه على مجموعة jQuery تحتوي على عناصر نموذج <form> و/أو عناصر تحكم بالنموذج (form controls). يمكن أن تكون عناصر التحكم من أنواع مختلفة:
<form>
<div><input type="text" name="a" value="1" id="a"></div>
<div><input type="text" name="b" value="2" id="b"></div>
<div><input type="hidden" name="c" value="3" id="c"></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f">
</div>
<div>
<input type="submit" name="g" value="Submit" id="g">
</div>
</form>
يستعمل التابع .serializeArray() قواعد المعيار W3C مع عناصر التحكم الناجحة (successful controls) لتحديد أي عنصر يجب إضافته. لا يمكن أن يُعطَّل العنصر تحديدًا وهو يحتوي على الخاصِّيَّة name. لا ترمَّز قيمة زر الإرسال بما أن النموذج لا يُرسَل باستعمال زر <button>، ولا ترمَّز البيانات من عناصر اختيار ملف أيضًا. تمثَّل العناصر التي لا تحتوي على الخاصِّيَّة value بقيمة فارغة.
يمكن تطبيق هذا التابع على كائن jQuery يحتوي على عناصر نموذج فرديَّة مثل <input> و <textarea> و <select>. على أي حال، من الأسهل عادةً تحديد العنصر <form> نفسه من أجل استعماله مع التابع مثل:
$( "form" ).submit(function( event ) {
console.log( $( this ).serializeArray() );
event.preventDefault();
});
تنتج هذه الشيفرة بنية البيانات التالية:
[
{
name: "a",
value: "1"
},
{
name: "b",
value: "2"
},
{
name: "c",
value: "3"
},
{
name: "d",
value: "4"
},
{
name: "e",
value: "5"
}
]
أمثلة
جلب جميع القيم من النموذج بشكل مستمر ومتكرِّر ثمَّ إظهارها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serializeArray مثالٌ عن استعمال التابع</title>
<style>
body, select {
font-size: 14px;
}
form {
margin: 5px;
}
p {
color: red;
margin: 5px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>الناتج:</b> <span id="results"></span></p>
<form>
<select name="single">
<option>خيار وحيد1</option>
<option>خيار وحيد2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">خيار متعدد1</option>
<option>خيار متعدد2</option>
<option selected="selected">خيار متعدد3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">مربع اختيار1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">مربع اختيار2</label>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>
<script>
function showValues() {
var fields = $( ":input" ).serializeArray();
$( "#results" ).empty();
jQuery.each( fields, function( i, field ) {
$( "#results" ).append( field.value + " " );
});
}
$( ":checkbox, :radio" ).click( showValues );
$( "select" ).change( showValues );
showValues();
</script>
</body>
</html>