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