JSON, JQuery를 이용해서 비동기통신(ajax) 예제

스프링등의 힘을 빌리지 않고 그냥 깡통 JSON.jsp를 만들어서 작업한다고 가정해보자

일단 서블릿이나 컨트롤러에서 JSON.jsp로 포워딩하면서 그 값들을 줄것이다.

JSON.jsp는 그 값들을 request나 session으로 받아 화면을 구성하기 시작할것이다 (그렇지만, 이 화면은 사용자에게는 보여지지않는다, 데이터 전달객체일뿐)

서블릿등에서 ArrayList<User> userList를 리퀘스트에 담아 보냈다고 치고 진행한다.

주의할점을 표시해야고, 쉼표 하나하나에도 조심하며 예민하고 델리컷하게 다뤄줘야하기 때문에 코드 css는 적용하지 않겠다.

//(*빨간색은 주의할점*)

////////////////////////////////////////JSON.jsp////////////////////////////////////////////   { <c:choose> <c:when test="${not empty requestScope.userList}"> "status" : true, "users" : { <c:forEach items="${userList}" var="user" varStatus="status"> { "userId" : "${user.userId}", "name" : "${user.name"}, "email" : "${user.email"}" } </c:forEach> <c:if test="${not status.last}> , <!-- 여기에 쉼표있다 --> </c:if> }   </c:when> <c:otherwise>"status" : false</c:otherwise> </c:choose> }

참고로 엔터를 무시하는 contentType="text/html"보다 "text/plain"을 쓰면 보기가 좋다 (직접 이 페이지를 볼일은 없지만 말이다)

다음은 JSON객체를 받아서 동작하는 index.html이다.이걸 그냥 집어넣는게 아니고 <script>안에 넣고, JQuery는 임포트하는건 기본

$.getJSON을 대신 써도 된다. 이렇게 만들면 하나하나 each가 돌면서 테이블에 뿅뿅 넣어줄것이다.

item과 $(this)는 같은데이터를 가지고 있다라고 들었는데(??근데 확인해본결과 무언가 형식이 다르게 보인다??)

//////////////////////////////////////index.html////////////////////////////////////////////// //클릭했을때 나오는 이벤트를 집어넣고.. getJSON이라는 함수도 쓸수있다. $.get("main.ryk",{"action" : "exeUserList" }, displayFunction, "json");   //이제 펑션을 만든다 function displayFunction(jsonObj) {   //이런식으로 객체에 아무것도 안왔을때 등록된 사용자가 없다고 알려주고 if(!jsonObj.status) { var td = $("<td colspan = '2'/>").text("등록된 사용자가 없습니다."); $("<tr/>").append(td).appendTo("#userList > tbody"); }else{ //이런식으로 json 오브젝트를 가져올수 있다. $(jsonObj.users).each(function(index,item){   //어차피 $(jsonObj.users)는 item으로 들어가기 때문에 밑에다가는 그냥 item 만해주면 됨 var td1=$("<td/>").text(item.userId); var td2=$("<td/>").text(item.name);   //한꺼번에 어펜드 해주는 알흠다움 $("<tr/>").append(td1,td2).appendTo("#userList > tbody");   });   }   }