jQuery.param()
원문 링크 
http://api.jquery.com/jQuery.param/
개요 : 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);
recursiveEncoded 와 recursiveDecoded 는 아래와 같이 알림창에 나타납니다.
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);
shallowEncoded 와 shallowDecoded 는 아래와 같은 결과를 보여줍니다.
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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery.each(), 일반적인 반복 함수 (2) | 2012.07.02 |
|---|---|
| serializeArray(), 폼 요소를 names와 values 배열로 인코딩 (0) | 2012.07.02 |
| serialize(), 폼 요소 집합을 인코딩 (2) | 2012.07.02 |
| jQuery.post(), Ajax HTTP POST 방식 요청 (1) | 2012.07.02 |
| load(), Ajax로 받은 HTML을 일치하는 요소 안에 추가 (2) | 2012.07.02 |
| jQuery.getScript, JavaScript 파일을 로드하고 실행 (2) | 2012.07.02 |
| jQuery.getJSON, JSON 데이터를 로드 (4) | 2012.07.02 |
| jQuery.get() HTTP GET 방식 Ajax 요청 (0) | 2012.06.19 |