ajax json 예제 이거 하나면 끝

요즘 웹에서는 .net이건 java건 Ajax와 Json 구조가 많습니다. 여기에 Jquery를 사용하여 거의 대부분의 웹 프로그램은 Ajax + Json + Jquery 이런 형태의 개발이라고 해도 과언이 아닙니다.

오늘은 저같은 초보자에게 유용한 길잡이가될 ajax json 예제를 알아보겠습니다. 간단하니 편안한 마음으로 쭈~욱~ 봐주세요~ㅎㅎㅎ


먼저 Ajax를 사용하여 DB에 있는 정보를 호출하는 부분 입니다.
자바스크립트가 들어가는 부분에 아래 스크립트를 넣어서 Ajax를 호출하세요~~~

/**********************************************************/
// Ajax를 사용하여 정보 추출
/**********************************************************/
var data = new Object();
data.dropDownData1 = $("#<%=_dropDownData1.ClientID%>.val();
data.dropDownData2 = $("#<%=_dropDownData2.ClientID%>.val();
data.dropDownData3 = $("#<%=_dropDownData3.ClientID%>.val();
data.dropDownData4 = $("#<%=_dropDownData4.ClientID%>.val();
data.dropDownData5 = $("#<%=_dropDownData5.ClientID%>.val();
var json_data = JSON.stringify({data: data});

$.ajax({
type : "POST",
url : "ajaxCall.aspx/ajaxCallMethodName",
data : json_data,
contentType : "application/json; charset=utf-8",
dataType : "json",
async : false,        // false : 동기
success : function (result){
alert(result.d);
getJson(result.d);// result가 다차원 배열 형태라면
// result가 1차배열 형태라면
// alert(result.d[0]);
}
failure : function (response){
alert(response.d);
}
});


다음으로 Json구조로 호출된 데이터를 사용하는 방법 입니다.
위에 success에서 설명했듯이 result가 1차원 배열의 형태라면 결과 값을 result.d[0]이런 식으로 받을 수 있습니다. 하지만 다차원의 배열 형태를 가지고 있다면 아래와 같은 구조로 값이 넘어 옵니다.

/**********************************************************/
// result가 다차원 배열 형태라면 아래와 같은 결과 값을 보여줍니다.
/**********************************************************/
{
"result_1" : {},
"result_2" : [{
"column1":"value_1",
"column2":"value_2",
"column3":"value_3",
},
{
"column1":"value_4",
"column2":"value_5",
"column3":"value_6",
}]
}

이런 형태의 값을 분해해서 보려면 밑의 함수 같이 할 수 있습니다.

/**********************************************************/
// result가 다차원 배열 형태라면 아래와 같이 정보를 추출 합니다.
/**********************************************************/
function getJson(result){
var obj = JSON.parse(result);
var array = eval(obj.result_2);

for(var i = 0; i < array.length; i++){
var json_column1 = array[i]["column1"];
var json_column2 = array[i]["column2"];
var json_column3 = array[i]["column3"];
}
}

어떠세요? 어렵지 않으시줘~ㅎ
처음에는 어려움을 느끼시겠지만 여러번 반복하다보면 그리 어렵지 않습니다.
이상으로 ajax json 예제에 대해서 알아보았습니다.
오늘도 행복한 하루되시길 바랍니다.^^