[JAVA]jsp에서 controller로 값 보내기 (ajax, jquery,serialize(), CRUD)

안녕하세요 오늘은 CURD 를 하기위해 원하는 값을 jsp에서 controller로 보내는 방법에 대해 알아보겠습니다.
값을 보내는 방법은 다양하지만 이번 포스팅에서는  ajax를 이용해서 보내보겠습니다.

 

전체적인 흐름입니다. 

먼저 사용자가 jsp에서 클릭 이벤트를 발생시키면 컨트롤러로 가고 success하게되면 그 결과값에 따라 작업을 수행하게 됩니다.

 

일단 jsp 페이지 구성을 먼저 보겠습니다.
update를 하기위한 상세 페이지 입니다. 기존에 등록되어있는 데이터를 보여주는 페이지 이기때문에
${resultMap}에 name, size, seq가 들어있다고 가정합니다.

<form id="updateForm">
        <ul>
            <li>
                <label for="name">
                	 이름
                </label>
                <input type="text" name="name" value="${resultMap.name }" >
               
            </li>
            <li>
                <label for="size">
                	 크기
                </label>
                <input  type="text" name="size" value="${resultMap.size }" >
            </li>         	
        </ul>

    <div class="form_button">
        <input type="button" value="취소">
        <input type="button" value="수정" class="update">
    </div>
</form>

 

값을 변경하고 수정버튼을 클릭하면 수정완료라고 alert창이 뜨는게 목적입니다.
ajax부분을 봐보겠습니다.

    $(document).off("click", ".update");
    $(document).on("click", ".update", function() {
        $.ajax({
        url : "/test/${ResultMap.seq}",
        type : "POST",
        data : $("#updateForm").serialize(),
        dataType: 'JSON',
        success : function (data) {
            if(data.resultMap.code == "1"){
                alert("success!")
                
            } else {
                alert("error!")
            }
            
            }
        });  //ajax
        
    });

update class를 클릭하면 실행되는 구문입니다.
url은 controller의 value값입니다. 여기서는 수정하고자하는 seq값을 보내줍니다.

type은 POST, GET, PATCH등이 있습니다. serialize()사용하려면 post 사용

data는 <form>태그의 id값을 넣어주면 그 안에있는 input값들이 모두 controller로 날아가게됩니다.

input의 name과 동일한 단어로 VO (DTO)에서  getter/setter값을 모두 지정해두어야합니다.
(예 private String name;) 이 VO를 받는 CONTROLLER에서 인자로 넣어주면 자동으로 값을 넣어서 가져옵니다. 
dataType은 JSON입니다.

success 은 성공시 결과를 보여주고 여기서 저는 결과에 따라 두가지로 분기처리했습니다. 수정에 성공시 alert("success!")를, 실패시 alert("error!")를 보여줍니다.
굳이 이분법적인 결과가 아니더래도 controller에서 보내는 결과에따라 화면상(jsp)에서 분기처리하기위해 ajax를 사용합니다. 예를 들어 controller에서 code=1,code=2,code=3 등등으로 결과값(return)을 보내면 success부분에서 
if else문이나 case문으로 if(data.code == '1')일때 '2'일때 '3'일때 등등 처리할 수 있습니다.

 

이렇게 하게되면 controller로 넘어가보겠습니다.

@RequestMapping(value="/test/{seq}", method = { RequestMethod.POST})
    public ModelAndView TESTUPDATE(TESTVO vo) {
        ModelAndView mav = new ModelAndView();
        Map<String, Object> resultMap = new HashMap<>();
        try {
            
           int result = 0;
                result = test_service.TestUpdate(vo);
                
                if(result > 0) {
                    resultMap.put("code","1");
                    
                }else {
                    resultMap.put("code","2");
                }
                
                mav.setViewName("jsonView");
                mav.addObject("resultMap", resultMap);
            
        } catch (Exception e) {
            LOGGER.error(LogUtil.getPrintStacTracekString(e));
        }
        
        return mav;
    }

ajax에서 설정했던 url과 controller에서 value값과 일치합니다.
method도 POST로 일치합니다.
인자도 input에 name값이 있는 VO를 가져옵니다. debug 모드에서 VO를 확인해보면 입력한 수정값이 모두 들어있음을 확인할 수 있습니다.

수정값이 모두 들어있는 vo를 test_service.TestUpdate(vo);로 보내줍니다.
그럼 service에서 업뎃 처리를 하고 만약 업데이트가 정상적으로 되었다면 1을 리턴해줍니다.
그래서 만약 result값이 1이라면 code에 1을 넣고 그값을 mav에 넣어서 보냅니다.

그러면 다시  jsp로 돌아와봅니다.

 success : function (data) {
            if(data.resultMap.code == "1"){
                alert("success!")
                
            } else {
                alert("error!")
            }
            
            }

data에는 컨트롤러에서 보낸 resultMap이 들어있습니다.

여기서 정상적으로 update됐다면 우리가 code값 1을 보냈으니까 alert("success")가 보이게 됩니다.

 

즉, 사용자가 상세화면에서 값을 수정하고 '수정'버튼 클릭하면 "success!"메시지창이 보이게 됩니다.

 

 

---

참고 

controller에서 setViewName("jsonView")라고 지정한것은

pom.xml에서 

<!-- JSON -->
<dependency>
    <groupid>net.sf.json-lib</groupid>
    <artifactid>json-lib-ext-spring</artifactid>
    <version>1.0.2</version>
</dependency>

지정하고 빈등록한다.

<!-- ajax JSON parsing -->
<beans:bean id="jsonView" class="net.sf.json.spring.web.servlet.view.JsonView">
<beans:bean id="viewResolver" class="org.springframework.web.servlet.view.BeanNameViewResolver">
    <beans:property name="order" value="0"></beans:property>
</beans:bean>
</beans:bean>

여기서 지정한 bean id 가 jsonView여서 가능했던 부분.

---

 

수고하셨습니다.

그럼이만.

 

jsp에서 name값이 동일한 태그가 여러개인경우 (배열) controller로 넘기기는 하단 포스팅 참고하세요.

https://bluemint.tistory.com/74

[spring] 배열값 controller로 값 넘기기 (serialize(), ajax)