재우니의 블로그

이태원 참사에 대한 깊은 애도를 표합니다. 티스토리측에서도 공지했듯 이태원 참사 관련으로 콘텐츠를 생산하는분이 없기를 바랍니다.

반응형

 

 

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

Description: Encode a set of form elements as a string for submission. The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as , , and : $( "input, te

api.jquery.com

 

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

Description: Encode a set of form elements as an array of names and values. The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery collection of forms and/or form controls. The cont

api.jquery.com

 

 

아래 실습 예제는 현재 실무에서 많이 사용하는 방법으로 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

 

json2csharp.com

 

 

테스트

 

https://jsfiddle.net/fs5v21a4/

 

Edit fiddle - JSFiddle - Code Playground

 

jsfiddle.net

 

반응형

댓글

비밀글모드