-
[JAVA]jsp에서 controller로 값 보내기 (ajax, jquery,serialize(), CRUD)WEB/BACK 2021. 6. 23. 14:45반응형
안녕하세요 오늘은 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
반응형'WEB > BACK' 카테고리의 다른 글
[Spring]1/3 eclipse에서 spring mvc project 생성+tomcat 화면 띄우기 (mac,openJDK11) (0) 2021.10.03 톰캣 버전 정보 확인 cmd (0) 2021.07.05 [sql] SELECT INET_NTOA, SELECT INET_ATON('127.0.0.1'); (0) 2021.06.17 java로 cmd명령어, ipconfig -all, mac 가져오기 (0) 2021.06.17 [JAVA] SELECT 로 가져온 데이타를 .json 파일로 변환하기 및 에러처리 (0) 2021.06.03