Struts2 jQuery JSON 으로 구현한 더블셀렉트

•본 코드는 개인적인 공부용으로 또는 그냥 생각나는 데로 만들어 본, 초보 개발자의  

쓰레기 코드 입니다. 아무렇게나 수정 하실 수 있으며 코드에 관한 개선사항은 언제든지 환영합니다.

 

예전에 지금 진행 하고 있는 프로젝트에 대비해 한번 만들어 본것인데..

역시나 간단하다. 조금 까다로운게 있다면 Struts2 는 Dojo 라는 자바스크립트 툴을 사용 한다는 것인데

 

Struts2 관련 서적을 뒤져봐도 Struts2 와 Dojo 를 사용한 예제는 극히 적으며

외우기도 힘든 struts2 tag library 를 사용해가며 낯선 Dojo 를 사용 할 바에야

그냥 jQuery 로 갖다 쓰기로 했다-_-;

 

jQuery 로 비동기 통신한 데이터를 javascript 단에서 처리 하려면 json 으로 데이터를 받는것이

반드시 필요하다.

 

struts2 는 json 을 완벽히(?) 그리고 간단하게 지원해주고 있다.

먼저 struts2 에서 result type으로 json 으로 받으려면 json 라이브러리를 추가 해주어야 한다.

jsonplugin-0.30.jar

 

struts2 최신 버전은 2.1.8 버전 부터는 번들로 포함 되어 있다고 하는데

지금 구버전이라 ..;;

 

위의 라이브러리 파일을 WEB-INF/lib 에 추가하고 작업을 시작한다.

 

먼저 struts.xml 파일에서 result type을 json 으로 사용 하려면 다음과 같이 해야 한다.

 

 <package name="example" namespace="" extends="json-default">
     <action name="JSONExample" class="JSONExample">
        <result type="json"/>
     </action>
     <action name="JSONForm" class="JSONForm">
        <result type="json"/>
     </action>
  </package>

 

중요한 부분은 빨간색 표시 해두었다.

 

반드시 package가 json-default를 상속 받아야 하며 result type에는 json을 명시하여야 한다.

또한 json 은 주로 비동기 요청 (Ajax) 에서 요청 되어지므로 결과 페이지는 안적어두 된다..

 

이제 jQuery에서 $.getJSON 메소드를 사용할 준비가 되었다.

 

 

먼저..

Action 파일을 작성 해보자. 첫번째 action 요청은 MakeSelect.java 파일에서 이루어진다

 

MakeSelect.java

 

import java.util.*;

import com.opensymphony.xwork2.*;

 

public class MakeSelect extends ActionSupport{

 

 private HashMap hm = new HashMap();
 
 public String execute() throws Exception {
 
  hm.put("001", "서울시");
  hm.put("002", "부산시");
  hm.put("003", "마산시");
 
  return SUCCESS;
 }

 public HashMap getHm() {
  return hm;
 }

 public void setHm(HashMap hm) {
  this.hm = hm;
 }
 
}

그리고 view 페이지에서 첫번째 셀렉트를 고르면 보여줄 두번째 셀렉트 리스트를 위한 액션

JSONExample.java

import com.opensymphony.xwork2.*;
import java.util.*;

public class JSONExample extends ActionSupport{

 private Map hMap = new HashMap();
 private String value; // 셀렉트 구분값

 

 public String execute() {
 
  if(value.equals("001"))
  {
   hMap.put("001001","종로구");
   hMap.put("001002","중구");
   hMap.put("001003","강남구");
  }
  else if(value.equals("002"))
  { 
   hMap.put("002001","몰라 부산1");
   hMap.put("002002","모른다니까 부산2");
   hMap.put("002003","아아아아");
   hMap.put("002004","kaskdkasd");
  }
  else
  {
   hMap.put("003001","회원구");
   hMap.put("003002","합포구");
  }
  return SUCCESS;
    }
 

 public Map getHMap() {
  return hMap;
 }
 
 public void setHMap(Map hMap) {
  this.hMap = hMap;
 }

}

액션을 만들었으니 struts.xml 에서 매핑을 시켜줘야겠지..

struts.xml

<struts>

    <!-- 첫번째 액션에서는 json 타입이 아니다. -->

    <package name="default" namespace="" extends="struts-default">
        <action name="myaction" class="MakeSelect">
         <result>/jsp/myaction.jsp</result>
        </action>
    </package>

   <!-- 비동기 요청이 이루어질 액션 -->

 

    <!-- Add JSON packages here -->
 <package name="example" namespace="" extends="json-default">
     <action name="JSONExample" class="JSONExample">
        <result type="json"/>
     </action>

 </package>

</struts>

 

이제 비동기 요청을 할 자바스크립트 파일..

jQuery-getJSON.js

// 첫번쨰 인자 url 은  요청 주소, param은 파라미터, callback은 알다시피..;

function jqGetJSON(url,param,callback,indicator)
{
 if(indicator)   //indicator 는 로딩 이미지 표시 여부
 {
  makeLoadingDiv();

 

//ajax 요청이 시작되기 전에 일어나는 전역함수 ajaxStart

//로딩중 이미지를 표시한다.
  $("#divLoading").ajaxStart(function(){
   $(this).show();
  });
 }
 

//jQuery 의 getJSON 요청 시작
 $.getJSON(url,param,callback);
 

// 로딩 이미지를 표시 했다면 숨긴다.
 if(indicator)
 {
  $("#divLoading").ajaxStop(function(){
   $(this).hide();
  });
 }
}

 

// 로딩 이미지 영역을 만든다.

function makeLoadingDiv()
{
 if (document.getElementById("divLoading"))
 {
  var str = '';
  str += "<div id='divLoading' style='display：none;z-index:1002;position：absolute;'>";
  str += " <img src='./img/indicator.gif' alt='로딩중..' />";
  str += "</div>";
 
  $("body").append(str);
 }
}

 

 

이제 view 페이지

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.util.*"%>
<%
 HashMap hm = (HashMap)request.getAttribute("hm");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="./script/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./script/jQuery-getJSON.js"></script>
<script type="text/javascript">
 $(function() {

  // 첫번째 셀렉트 박스에서 change 이벤트가 일어나면 ajax 요청

  $("#s1").change(function(){
   jqGetJSON("JSONExample.action",{value:$(this).val()},loadSelect,true);
  });

 

 });

 function loadSelect(data)
 {
  var sval = $("#s1").val();
  if(sval!="none")
  {
   $("#s2").attr("disabled",false);
   $("#s2").each(function(){ this.options.length=0;});
   

 //넘어온 JSON의 property 들로 option을 생성한다.
   for(var myData in data.HMap)
   {
    $("#s2").each(function(){
     var option = new Option(data.HMap[myData], myData);
     if($.browser.msie)
      this.add(option);
     else
      this.add(option,null);    
    });
   }
  }
  else if(sval=="none")
  {
   $("#s2").attr("disabled","true");
   
  }
 }

 

</script>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

<!-- 본문 시작 -->

<!-- 첫번쨰 액션에서 받아온 데이터로 셀렉트 리스트를 만든다. -->

  <select name="s1" id="s1">
   <option value="none">-----선택--------</option>
<%
 Iterator it = hm.keySet().iterator();
 while(it.hasNext())
 {
  String key = (String)it.next();
  String value = (String)hm.get(key);
%>
  <option value=<%=key %>><%=value %></option>
<%
 }
%>
  </select>
    &nbsp;  &nbsp;  &nbsp;  &nbsp;
  <select name="s2" id="s2" disabled="disabled">
   <option value="none">---시를 선택하세요---</option>
  </select>
 </body>
</html>

 

....

여기까지다..

struts2에서 json 타입을 사용하면 알아서 json 구조로 바꿔서 넘어오니

eval 함수를 사용할 필요도 없고 너무너무 간단해진다..

끝