•본 코드는 개인적인 공부용으로 또는 그냥 생각나는 데로 만들어 본, 초보 개발자의
쓰레기 코드 입니다. 아무렇게나 수정 하실 수 있으며 코드에 관한 개선사항은 언제든지 환영합니다.
예전에 지금 진행 하고 있는 프로젝트에 대비해 한번 만들어 본것인데..
역시나 간단하다. 조금 까다로운게 있다면 Struts2 는 Dojo 라는 자바스크립트 툴을 사용 한다는 것인데
Struts2 관련 서적을 뒤져봐도 Struts2 와 Dojo 를 사용한 예제는 극히 적으며
외우기도 힘든 struts2 tag library 를 사용해가며 낯선 Dojo 를 사용 할 바에야
그냥 jQuery 로 갖다 쓰기로 했다-_-;
jQuery 로 비동기 통신한 데이터를 javascript 단에서 처리 하려면 json 으로 데이터를 받는것이
반드시 필요하다.
struts2 는 json 을 완벽히(?) 그리고 간단하게 지원해주고 있다.
먼저 struts2 에서 result type으로 json 으로 받으려면 json 라이브러리를 추가 해주어야 한다.
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>
<select name="s2" id="s2" disabled="disabled">
<option value="none">---시를 선택하세요---</option>
</select>
</body>
</html>
....
여기까지다..
struts2에서 json 타입을 사용하면 알아서 json 구조로 바꿔서 넘어오니
eval 함수를 사용할 필요도 없고 너무너무 간단해진다..
끝
jquery.checkformtext.kyj_1.js
