javascript : serialize(), serializeArray()

 

 

serialize()

 

 

.serialize() 메서드는 표준 URL 인코딩 표기법으로 텍스트 문자열을 생성합니다.

 

form을 대상으로 serialize() 메소드를 사용하면 폼의 객체들을 한 번에 받을 수가 있습니다. ajax 에 data 값을 세팅할 때 사용하면, 해당 form 의 모든 값을 쉽게 받을 수 있답니다.

 

$( "input, textarea, select" ).serialize();

 

form 의 element 의 값이 직렬화된 문자열에 포함되려면 요소에 name 속성이 있어야 합니다. 체크박스와 라디오 버튼( input"radio" 또는 "checkbox" 유형)의 값은 체크 된 경우에만 포함됩니다. file 의 첨부파일의 데이터는 직렬화되지 않습니다.

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

 

<결과 형태>

single=Single&multiple=Multiple&multiple=Multiple3&check=check1&check=check2&radio=radio1

 

https://api.jquery.com/serialize/

.serialize() | jQuery API Documentation

 

serializeArray()

 

이는 요소들의 형태를 배열처럼 name 와 value 형태로 담아서 인코딩합니다.

이 .serializeArray() 메서드는 JSON 문자열로 인코딩할 준비가 된 객체의 JavaScript 배열을 만듭니다.

<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>

 

$( "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"
  }
]

 

참고사이트

 

https://api.jquery.com/serializearray/

.serializeArray() | jQuery API Documentation

 

 

아래 실습 예제는 현재 실무에서 많이 사용하는 방법으로 json 형태를 object 에 담아 ajax 으로 통신하여 이를 백엔드 인 c# 을 통해 값을 추출하는 방법을 설명합니다.

 

 

실습

 

<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">
  <input type="text" name="username" value="유저네임">  
  
  <input type="checkbox" name="checkbox1" value="1" checked /></label>
  <br />  
  <input type="checkbox" name="checkbox2" value="2" /></label>
  <br />  
  <input type="radio" name="radiobutton" value="button-1" /> 
  <input type="radio" name="radiobutton" value="button-2" checked /> 
  <input type="radio" name="radiobutton" value="button-3" /> </label>
  <br />
  
    <select name="dropdown">
      <option></option>
      <option value="option-1">Option 1</option>
      <option value="option-2" selected>Option 2</option>
      <option value="option-3">Option 3</option>
    </select>
  
</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();
console.log(serializeObject);

 

Json 결과 값

{
  age: "13",
  checkbox1: "1",
  dropdown: "option-2",
  name: ["Park", "Kim", "Hong"],
  radiobutton: "button-2",
  username: "유저네임"
}

 

동일한 name 명이 존재할 경우 이를 배열 [] 로 받아서 넣고 있다.

 

C# 으로 object 담기

 

위의 json 을 문자열로 받아 c# 에서 object 형으로 변환이 가능하다.

 

    public class Root
    {
        public string age { get; set; }
        public string checkbox1 { get; set; }
        public string dropdown { get; set; }
        public List<string> name { get; set; }
        public string radiobutton { get; set; }
        public string username { get; set; }
    }

 

 

JsonConvert 로 DeserializeObject 하여 c# 객체에 담을 수 있다.

Root myDeserializedClass = JsonConvert.DeserializeObject<Root>(myJsonResponse);

 

https://json2csharp.com/json-to-csharp

Convert JSON to C# Online - Json2CSharp

 

 

테스트

 

https://jsfiddle.net/fs5v21a4/

Edit fiddle - JSFiddle - Code Playground