jQuery ajax - serializeArray() ·½·¨
ʵÀý
Êä³öÒÔÊý×éÐÎʽÐòÁл¯±íµ¥ÖµµÄ½á¹û£º
$("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 ¶ÔÏó¶ø·Ç JSON ×Ö·û´®¡£ÐèҪʹÓòå¼þ»òÕßµÚÈý·½¿â½øÐÐ×Ö·û´®»¯²Ù×÷¡£
·µ»ØµÄ 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 + " ");
});