jquery - Serialize(), serializeArray(), SerializeObject() 폼 배열

 

 

1. Serialize()

<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Park">
  <input type="hidden" name="name" value="Kim">
  <input type="hidden" name="name" value="Hong"> 
  <input type="hidden" name="age" value="13">
</form>
<div name="resultDiv" id="resultDiv">
  
</div>

var serialize = $('#dataForm').serialize();
// id가 dataForm인 form의 내부 값을 직렬화 처리한다.

$('#resultDiv').html(serialize);

//결과
name=Park&name=Kim&name=Hong&age=13

 

 

2. serializeArray()

<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Park">
  <input type="hidden" name="name" value="Kim">
  <input type="hidden" name="name" value="Hong"> 
  <input type="hidden" name="age" value="13">
</form>
<div name="resultDiv" id="resultDiv">
  
</div>

var serializeArray = $('#dataForm').serializeArray();

$('#resultDiv').html(JSON.stringify(serializeArray));

//결과
[{"name":"name","value":"Park"},{"name":"name","value":"Kim"},{"name":"name","value":"Hong"},{"name":"age","value":"13"}]

 

 

3. SerializeObject()

<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Park">
  <input type="hidden" name="name" value="Kim">
  <input type="hidden" name="name" value="Hong">
  <input type="hidden" name="age" value="13">
</form>

$.fn.serializeObject = function() {
  "use strict"
  var result = {}
  var extend = function(i, element) {
    var node = result[element.name]
    if ("undefined" !== typeof node && node !== null) {
      if ($.isArray(node)) {
        node.push(element.value)
      } else {
        result[element.name] = [node, element.value]
      }
    } else {
      result[element.name] = element.value
    }
  }

  $.each(this.serializeArray(), extend)
  return result
}

var serializeObject = $('#dataForm').serializeObject();

 

 

 

출처 - devut90.tistory.com/20