jQuery에서 서버로 GET방식의 요청을 보내고 응답을 JSON으로 받는 $.getJSON 함수를 제공한다.
getJSON을 사용해서 간단한 동적 selectbox를 구현해보자. -_-/
우선 대상 getData.jsp는 아래와 같은 JSON 형식이다.
..편집기에서 붙였더니 들여쓰기가 다 엉망이 됐다.ㅡㅜ...
참고도서 : jQuery in Action(인사이트)
getJSON을 사용해서 간단한 동적 selectbox를 구현해보자. -_-/
우선 대상 getData.jsp는 아래와 같은 JSON 형식이다.
[
{
text : 테스트01,
value : 01
},
{
text : 테스트02,
value : 02
}
]
그럼 저 getData.jsp의 내용을 가져와 적용할 실제 페이지내용은 아래와 같다
<script type="text/javascript">
$(function () {
var params = { seq : 1 }; //파라미터 선언
$.getJSON("getData.jsp", params, function (returnData, textStatus){
if(textStatus == 'success'){
//sample 객체에 SELECT 옵션내용 추가.
$("#sample").loadSelect(returnData);
} else {
alert("ERROR!");
return;
}
});
});
//동적 SELECTBOX 구현을 위한 사용자 함수
(function($) {
//SELECT OPTION 삭제
$.fn.emptySelect = function() {
return this.each(function(){
if (this.tagName=='SELECT') this.options.length = 0;
});
}
//SELECT OPTION 등록
$.fn.loadSelect = function(optionsDataArray) {
return this.emptySelect().each(function(){
if (this.tagName=='SELECT') {
var selectElement = this;
$.each(optionsDataArray,function(idx, optionData){
var option = new Option(optionData.text, optionData.value);
if ($.browser.msie) {
selectElement.add(option);
}
else {
selectElement.add(option,null);
}
});
}
});
}
})(jQuery);
</script>
<select id="sample">
</select>
..편집기에서 붙였더니 들여쓰기가 다 엉망이 됐다.ㅡㅜ...
참고도서 : jQuery in Action(인사이트)
최근 덧글