التابع .serialize() في jQuery
.serialize()
القيم المعادة
يعيد سلسلة نصية من النوع String.
الوصف
يُرمِّز هذا التابع مجموعة من عناصر النماذج ويضعها في سلسلة نصيِّة من أجل إرسالها.
.serialize()
أُضيف مع الإصدار: 1.0. ولا يقبل هذا التابع أية وسائط.
ينشئ التابع .serialize() سلسلة نصية من رموز URL المشفَّرة القياسيَّة (standard URL-encoded notation). يمكن تطبيقه على كائن jQuery الذي يحتوي على عناصر نموذج فردية مثل <input> و <textarea> و <select> بالشكل:
$( "input, textarea, select" ).serialize();
من الأسهل عادةً تحديد العنصر <form> نفسه من أجل استعماله مع التابع مثل:
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
في هذه الحالة، ستُطبِّق jQuery التابع .serialize() على عناصر التحكم الناجحة التي ضمن النموذج، وستُفحص العناصر <form> فقط من أجل المدخلات التي تحتويها؛ وفي جميع الحالات الأخرى التي يراد فيها تطبيق التابع على العناصر <input>، يجب أن تكون تلك العناصر جزءًا من المجموعة المُمرَّرة إلى التابع .serialize(). سيؤدي تحديد أبناء العناصر <form> بالإضافة إليها في المجموعة إلى تكرارها في السلسلة النصية المعادة.
ملاحظة: يمكن ترميز عناصر التحكم الناجحة فقط ووضعها في سلسلة نصيَّة. لا ترمَّز قيمة زر الإرسال بما أن النموذج لا يُرسَل باستعمال زر <button>. إن أردنا أن تدخل قيمة العنصر <form> ضمن السلسلة النصية المرمَّزة، فيجب أن يمتلك العنصر الخاصِّيَّة name. ترمَّز قيم عناصر الإدخال <input> ذات النوع "زر انتقاء" والنوع "صندوق اختيار" إن حدَّد المستخدم عليها (checked) فقط، بينما لا ترمَّز البيانات من العناصر ذات النوع "اختيار ملف".
أمثلة
ترميز نموذج إلى سلسلة نصيَّة تمثل استعلامًا يمكن إرسالها إلى خادم في طلب Ajax:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serialize مثالٌ عن استعمال التابع</title>
<style>
body, select {
font-size: 12px;
}
form {
margin: 5px;
}
p {
color: red;
margin: 5px;
font-size: 14px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<select name="single">
<option>خيار1</option>
<option>خيار2</option>
</select>
<br>
<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">صندوق اختيار</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">صندوق اختيار2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">زر انتقاء1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">زر انتقاء2</label>
</form>
<p><tt id="results"></tt></p>
<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>
</body>
</html>