Controller에서 AJAX로 받아 활용하는 방법 (AJAX활용방법)

 

안녕하세요. 오늘은 Controller에서 ajax로 받아 활용하는 방법을 이야기하려합니다.

제가 작업하는 목적은 화면페이지가 느렸기에 Controller를 나눠주어 ajax를 통해 데이터를 부를 수 있도록 설정하는 작업을 진행하였습니다. 우선 AJAX와 JSON을 알아야할 필요가 있습니다.

 

 

AJAX

 

Asynchronous Javascript And XML의 약어로써 아작스 및 에이잭스라 불리며, 흔히 비동기 통신이라 불립니다.

기존에 웹 브라우저에서 서버로부터 페이지 단위로만 받기 때문에 많은 낭비가 있었습니다. 그래서 AJAX란 기술을 이용하여 XML 파일 조각 단위로 데이터를 받아오면서 페이지 일부의 동작을 동적으로 만들 수 있게 되었습니다.

 

 

비통기 통신을 하기 위해서는,

클라이언트가 서버로 요청 메시지의 본문에 데이터를 담아 보내야하며 (요청본문(@RequestBody)),

서버도 응답 메시지의 본문에 데이터를 담아 보내야 합니다. (응답본문(@ResponseBody))

본문에 담겨야 하는 데이터 형식이 JSON(Javascript Object Notation) 입니다.

 

 

 

JSON

키-값으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포멧이며, JSON으로 서버와 클라이언트 서로서로에게 전송할 수 있습니다.

 

 

 

이젠 코드로 보며 설명드리도록 하겠습니다.

 

 

 

---

 

셋팅

 

 

 

pom.xml

<!-- json object[s] -->
<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <classifier>jdk15</classifier>
    <version>2.4</version>
</dependency>

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-core-asl</artifactId>
    <version>1.9.13</version>
</dependency>
<!-- json object[e] -->

우선 시작에 앞서 pom.xml에 jsonObject를 사용하기 위한 설정을 해야합니다.

 

 

 

 

 

 

 

 

controller

 

 

그리고 임포트 시, 윗 부분으로 하시면 됩니다.

 

 

 

 

 

첫번째

첫번재는 가장 보편적인 방법의 AJAX입니다.

대부분 삭제 또는 수정 기능을 사용할때 AJAX를 많이 사용합니다.

첫번째 방법에서는 간단히 삭제기능을 가지고 AJAX 방법을 해보겠습니다.

 

 

 

 

html

 

<a href="javascript:void(0);" onclick="fn_delete('${result.board_idx}');return false;" class="btn btn-danger btn-sm">삭제</a>
 

 

onclick에 함수를 정의하고 괄호안에 인덱스를 넣어줍니다.

 

 

 

 

 

Javascript

 

function fn_delete(board_idx){
  if(!confirm("삭제를 하시겠습니까?"))
 
  return false;
  
  var submitObj = new Object();
  submitObj.board_idx= board_idx;
  
  
  $.ajax({ 
    url: "/board/delete_action.do", 
    type: "POST", 
    contentType: "application/json;charset=UTF-8",
    data:JSON.stringify(submitObj),
    dataType : "json"
    }) 
    .done(function(resMap) {
    
      alert(gTxt(resMap.msg));
 
    }) 
    .fail(function(e) {  
        alert("삭제를 실패하였습니다.");
    }) 
    .always(function() { 
        
    }); 
  
}
 

 

먼저 버튼을 누를경우 확인창이 뜨도록 confirm 을 설정합니다.

그리고 서버로 보낼 object객체를 변수로 만들어서 board_idx를 담습니다.

url은 controller의 url과 매칭을합니다.

post방식으로 utf-8 형식의 submitobj 데이터를 json 방식으로 보내겠다는 말입니다.

성공할경우 .done으로 가고 실패할경우 .fail로 보내집니다.

성공할 경우 resMap에 담긴 삭제 메세지를 뛰우도록 합니다.

 

 

 

 

 

 

controller

 

@RequestMapping(value = "/board/delete_action.do", method = RequestMethod.POST)
@ResponseBody
public String delete_action(
      @RequestBody String filterJSON,
      HttpServletResponse response,
      ModelMap model ) throws Exception {
      
      JSONObject resMap = new JSONObject();
  
  try{            
      ObjectMapper mapper = new ObjectMapper();
      BoardVO searchVO = (BoardVO)mapper.readValue(filterJSON,new TypeReference<BoardVO>(){ });
              
      boardService.deleteBoardVO(searchVO);
      resMap.put("res", "success");
      resMap.put("msg", "삭제를 완료하였습니다.");
      
  }catch(Exception e){
                  
  }
  response.setContentType("text/html; charset=UTF-8");
  PrintWriter out = response.getWriter();
  out.print(resMap);
  
  return null;
}
 

 

 

 

json파일에 있는 데이터를 mapping하여 가져오는 방법으로는 objectMapper를 이용할 수 있습니다.

objectMapper의 readvalue함수를 이용하여 쉽게 가져올 수 있습니다.

TypeReference객체는 대상을 어떤 타입으로 변환할때 사용됩니다. 

(여기서는 vo객체를 이용합니다.)

그리고 삭제를 서비스에 선언합니다.

 

 

 

 

 

 

 

 

service & serviceImpl

 

 

void deleteBoardVO(BoardVO searchVO); 

 

@Override
public void deleteBoardVO(BoardVO searchVO){
    dao.deleteBoardVO(searchVO);
}
 

 

public void deleteBoardVO(BoardVO searchVO) {
    delete("deleteBoardVO", searchVO);
}
 

 

 

 

 

 

xml

 

<delete id="deleteBoardVO" parameterType="BoardVO">
        delete from 
            tbl_board
        where
            board_idx =#{board_idx}
</delete>

 

 

그리고 삭제 쿼리를 실행하면 정상적으로 AJAX를 통한 삭제가 이루어집니다.

이 방법을 응용해서 삭제,수정,리스트 등의 기능을 사용하시면 됩니다.

 

 

 

반응형

 

 

두번째

 

 

두번째 방법은 controller에서의 데이터를 가지고 ajax로 보내 html에 적용하는 방법입니다.

 

Controller

 

 

    @RequestMapping(value = "/home/weatherData.do", method = RequestMethod.GET)
    @ResponseBody
    public String index_ajax(@ModelAttribute("searchVO") TBL_RESVEVO searchVO, HttpServletRequest request, HttpServletResponse response) throws Exception {
        PrintWriter out = response.getWriter();
        JSONObject resMap = new JSONObject();
        
        Map<String, Object> weatherMap = weatherApi();
        
        if(weatherMap.get("POP") == null) { weatherMap.put("POP","0"); }
        if(weatherMap.get("REH") == null) { weatherMap.put("REH","0"); }
        if(weatherMap.get("REH") == null) { weatherMap.put("REH","0"); }
        if(weatherMap.get("WSD") == null) { weatherMap.put("WSD","1"); }
        if(weatherMap.get("SKY") == null) { weatherMap.put("SKY","1"); }
        
        resMap.put("res", "ok");
        resMap.put("weatherMap",JSONObject.fromObject(weatherMap));
        
        out.print(resMap);
        
        return null;
    }

우선 컨트롤러에서 서버에서 클라이언트로 응답을 보내기 위해 @ResponseBady를 선언해줍니다.

그리고 Map의 weatherMap이라는 변수에 값을 담아 resMap에 weatherMap을 키로 선언해줍니다. 

여기서 값은 JSONObject.fromObject 안에 weatherMap을 넣어주면서

String형식의 JSON방식을 Object로 변경하여 String보다 더 깊게 접근할 수 있도록 설정해줍니다.

 

(weatherApi()메소드는 날씨 API를 활용하며 만든 메소드이며 맵 형식의 데이터가 들어 있습니다.

해당 메소드는 코드가 복잡하여 공유하기가 어려우니 활용법만 참고 부탁드립니다.)

 

 

여기서 참고할 부분은

Map 형식일 경우,  JSONObject.fromObject

List 형식일 경우, ArrayObject.fromObject 를 이용해줍니다.

 

 

 

 

 

JSP

 

 

 

<div class="weather">
        <li class="w3">
            <ul>
                <li>강수확률<span class="w_POP"><%-- ${weatherMap.POP} --%>%</span></li>
                <li>습도<span class="w_REH"><%-- ${weatherMap.REH} --%>%</span></li>
                <li>풍속<span class="w_WSD"><%-- ${weatherMap.WSD} --%>m/s</span></li>
            </ul>
        </li>
</div>

JSP에 HTML 화면입니다.

 

 

 

 

function weatherDate(){
        var gdata="";
        
        
        $.ajax({ 
                url: path+"/home/weatherData.do", 
                type: "GET",                 
                data: gdata,
                dataType : "json",
                async: true
               }) 
               .done(function(resMap) {
                              
                  if(resMap.res == "ok"){
                      
                      var wObj =  resMap.weatherMap;
                      console.log(wObj);

그리고 자바스크립트에서 함수 이름(weatherMap)을 선언해줍니다.

 

url은 controller의 url과 매칭을합니다.

async에서는 비동기여부를 정하는데 true 또는 false가 옵니다.

 

True(비동기방식)로 설정하게 되면, 서버의 응답을 기다릴 필요 없이 다른 스크립트를 실행하다가

서버의 응답준비 상태가 되면, 응답을 처리하는 방식입니다.

False(동기) 게 되면, 서버에서 응답이 준비될때까지 스크립트를 계속 실행하지 않고 로딩이길어 질 수가 있기때문에, 권장하지는 않습니다.

 

.done 부분에서는 Return하는 값을 받는 곳으로 지정하였으며, resMap에 선언된 weatherMap를 wObj에 담았습니다.

 

 

 

 //------------------날씨 이미지 아이콘-----------------
    var imgsrcBase = path+"/img/main/weather";
    var imgsrcExt = ".png";
    var sky = wObj.SKY;
    var imgsrc = imgsrcBase+sky+imgsrcExt;	      				
    $("div.weather").find("img.w_img").attr("src",imgsrc);  
    //------------------날씨 이미지 아이콘-----------------
    
    
    var T3H = wObj.T3H;
    var POP = wObj.POP;  //%
    var REH = wObj.REH;  //%
    var WSD = wObj.WSD;  //m/s
    
                    
    $("div.weather").find("span.w_T3H").html(T3H);
    $("div.weather").find("span.w_POP").html(POP+" %");
    $("div.weather").find("span.w_REH").html(REH +" %");
    $("div.weather").find("span.w_WSD").html(WSD+" m/s");
    
}
}) 
.fail(function(e) {  
    alert("FAIL - "+e);
}) 
.always(function() {}); 

 

그리고 날짜 이미지 아이콘을 설정해준 다음,

HTML에 주소값과 find로 클래스 명을 넣어준 후, html안에 값을 넣어줍니다.

(data를 바꿀때는 html를 사용하고, select나 input를 바꿀때는 val를 사용합니다.)

그리고 실패일 경우 alert 창을 띄어 에러 메시지가 나타날 수 있도록 합니다.

Always는 성공할때나 실패할때나 관계없이 사용할 수 있는 부분인데 저는 해당이 없어 빈칸으로 두었습니다.

 

 

 

 

$(function() {
    
         weatherDate();
        
    });

 

그리고 마지막으로 위에 자바스크립트가 실행되는 부분에 함수 이름인 weatherDate를 선언해서 실행될 수 있도록 설정합니다.

 

 

 

 

 

Javascript 전체소스

 

$(function() {

weatherDate();

});

function weatherDate(){
var gdata="";


$.ajax({ 
url: path+"/home/weatherData.do", 
type: "GET", 	      	  
data: gdata,
dataType : "json",
async: true
}) 
.done(function(resMap) {
            
if(resMap.res == "ok"){
    
    var wObj =  resMap.weatherMap;
    console.log(wObj);

    
    //------------------날씨 이미지 아이콘-----------------
    var imgsrcBase = path+"/img/main/weather";
    var imgsrcExt = ".png";
    var sky = wObj.SKY;
    var imgsrc = imgsrcBase+sky+imgsrcExt;	      				
    $("div.weather").find("img.w_img").attr("src",imgsrc);  
    //------------------날씨 이미지 아이콘-----------------
    
    
    var T3H = wObj.T3H;
    var POP = wObj.POP;  //%
    var REH = wObj.REH;  //%
    var WSD = wObj.WSD;  //m/s
    
                    
    $("div.weather").find("span.w_T3H").html(T3H);
    $("div.weather").find("span.w_POP").html(POP+" %");
    $("div.weather").find("span.w_REH").html(REH +" %");
    $("div.weather").find("span.w_WSD").html(WSD+" m/s");
    
}
}) 
.fail(function(e) {  
    alert("FAIL - "+e);
}) 
.always(function() {}); 

}

 

잘못된 점이 있으면 댓글 부탁 드립니다 :)