jQuery.param(), Ajax 데이터용 배열이나 객체를 직렬화

jQuery.param()

원문 링크 http://api.jquery.com/jQuery.param/

.jQuery.param( obj )Returns : string

개요 : URL 쿼리 스트링 또는 Ajax 요청에 사용할 수 있도록 배열이나 객체를 직렬화 합니다.

  • jQuery.param( obj )
  • obj 배열 또는 객체
  • jQuery.param( obj, traditional )
  • obj 배열 또는 객체
  • traditional 얕은 수준(Shallow) 직렬화 지원 여부를 결정하는 Boolean 값

이 함수는 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현합니다.

jQuery 1.3 까지는 함수 문자열 대신 함수의 반환값을 사용했습니다. ( the return value of a function is used instead of the function as a String ).

jQuery 1.4 부터는, $.param() 함수는 PHP나 Ruby on Rails와 같은 프레임워크와 최신의 스크립트들을 수용하기 위해 중첩 객체 직렬화를 사용하게 되었습니다. 만일 이 기능을 원하지 않는다면 전역설정인 jQuery.ajaxSettings.traditional = true;와 같이 세팅하면 됩니다.

만일 배열을 전달한다면, .serializeArray()에 의해 반환되는 형식 개체의 배열 이어야 합니다.

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]

Note: 만약 직렬화 배열을 파싱하는데 제한이 있는 어떤 프레임워크를 사용하게 된다면, 개발자는 개체 또는 다른 배열 내에 중첩 배열을 포함하는 obj 인수를 전달할 때 각별히 주의해야 합니다.

Note: param 문자열에 대한 보편적으로 합의된 사양은 없기 때문에, 이 함수를 사용하여 모든 language들을 지원하는 방식의 복잡한 데이터 구조를 인코딩 할 수 없습니다.

jQuery 1.4에 와서, HTML5 의 input 요소들도 직렬화 할 수 있습니다.

아래와 같이 쿼리스트링을 만들수도 있고 URI-decoded 도 할 수 있습니다.

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

recursiveEncodedrecursiveDecoded 는 아래와 같이 알림창에 나타납니다.

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

$.param() 함수를 jQuery 1.4 이전 버젼 형태로 사용하길 원하면, traditional 인자를 true로 설정해야 합니다.

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

shallowEncodedshallowDecoded 는 아래와 같은 결과를 보여줍니다.

a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3

예 제  
key/value 객체로 직렬화 합니다.

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="results"></div>
<script>

    var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);
</script>

</body>
</html>

미리보기

 

예 제   조금 복잡한 형태의 직렬화

// <=1.3.2: 
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"

// <=1.3.2: 
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a=[object+Object]&d=3&d=4&d=[object+Object]"
// >=1.4: 
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

 

Ajax로 데이터를 만들어서 보낼 때 필요한 함수네요. 1.4 버젼 부터 멋지게 변했습니다. form에 있는 데이터를 꺼내서 이 함수를 태우면 쿼리스트링을 만들어 준다니까 잘 사용하시기 바랍니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

Comment List

Write Comment