AXISJ에서 ajax를 이용하여 AXGrid에 JSON으로 DB 가져오기

글내용에 앞서 일기를 적어보자면

제목은 뭔가 거창한데 내용은 별거 없다.

물론 본인은 삽질하느라 헤매고 머리도 띨해서 더 힘들었다.

독학으로 깨우치기 힘들어 뒈질거같다.

하지만 깨닫고 성공했을 때는 세상을 얻은 기분.

글의 본론으로 들어가자면

일단 속성으로만 작성하겠다.

자바 스프링 프렘웍을 사용하였고 jsp를 이용하였다.

오라클 마이바티스 프렉웍 사용하였다.

컨트롤러는 다음과 같다.

@RequestMapping(value="/listMember/")

public void listMember(HttpServletResponse resp) throws IOException{

List<Object> list =service.listMember();    // interface에서 implements 된  서비스클래스에 db와 연결

JSONObject jso = new JSONObject();       // JSON과 관련된 라이브러리 필요

jso.put("list", list);

jso.put("result", "ok");                            // 이부분 때문에 개고생(사실 이렇게 하는게 맞는지 모르겠지만 AXJ에서 통신성공검증을 위해 필요하다)

resp.setContentType("text/html;charset=utf-8");

PrintWriter out = resp.getWriter();

out.print(jso);

}

위에어 중요한건 데이터를 쏴줄때 result가 ok로 설정되어 있어야한다는 것이다.

엑시스제이 lib폴더에 보면 AXGrid.js가 있는데 그안의 setList 함수가 정의되어있다.

new AXReq(url, {

debug: false, pars: pars, onsucc: function (res) {

if (res.result == AXConfig.AXReq.okCode){   

res._sortDisable = sortDisable;

if (obj.response) {

obj.response.call(res);

} else {

ajaxGetList(res);

}

if (obj.onLoad) obj.onLoad.call(res);

} else {

AXUtil.alert(res);

}

}

});

 위에서 중요한건 result를 정의해 놓지 않으면 res.result == AXConfig.AXReq.okCode 이부분이 false로 처리 되면서 else문으로 진입하여 디비에서 불러온 json형식의 데이터가 alert으로 처리되어 나타나기만 하고 원하는 결과를 얻지 못한다.

AXConfig.AXReq.okCode가 뭔지는 아래에서 확인할 수 있다.

똑같이 lib폴더에 보면 AXJ.js 파일이 있는데

여기서 okCode가 ok로 설정되어있는것을 확인 할 수 있다.

AXReq: {

async: true, // AJAX 비동기 처리 여부

okCode: "ok", // 통신 성공 코드

responseType: "", // AJAX responseType

dataType: "", // AJAX return Data type

contentType: "application/x-www-form-urlencoded; charset=UTF-8", // AJAX contentType

dataSendMethod: "parameter", // AJAX parameter send type

crossDomain: false,

resultFormatter: function () { // onsucc formatter

return this;

}

},

그리고 가장 중요한 json 형식은

{"result":"ok","list":[{"name":"aa","id":"bb"}.{"name":"aaa","id":"bbb"}.{......}....]}

result 키로 ok 값을 주고

뿌려줄 데이터들의 키는 꼭 list 라는 이름으로 명시해줘야한다.

AXGrid.js 에 이러한 이름들로 돌아가게끔 만들어 놓았다.