[스프링프로젝트연습 13] 스프링 프로젝트 구현 - ajax사용 /CRUD - UPDATE

이어서 CRUD 중 U(update)에 해당하는 UPDATE 관련 내용을 설명한다.
테스트 단계이므로 그리드 등의 API는 사용하지 않고 일반 테이블로 작성한다.

3.    UPDATE

ㄱ.   화면 뷰 수정 (JSP)

-      앞서 조회된 리스트 중 1개의 행을 클릭한 경우 UPDATE 폼에 출력하고 출력된 정보를 수정한 후 수정 버튼을 클릭하면 실제 데이터가 업데이트 되도록 처리한다.

-      먼저 업데이트 관련 화면 폼을 작성한다.

 

	<P> 3. DATA UPDATE </P>
	<!-- 2번의 table 리스트 중 1개를 클릭하는 경우 아래에 데이터가 조회되도록 하여 정보 수정이 가능하도록 구현한다. -->
	<br/>
	<div style="width: 50%; border: 1px solid gray; padding:15px; display: grid">
			<label>ID</label>
			<input type="text" id="txtModifyUserId" readonly="readonly">
			<br/>
			<label>Password</label>
			<input type="password" id="txtModifyUserPwd">
			<br/>
			<label>Name</label>
			<input type="text" id="txtModifyUserName">
			<br/>
			<label>Tel</label>
			<input type="text" id="txtModifyUserTel">
			<br/>
			<label>Email</label>
			<input type="text" id="txtModifyUserEmail">
			<br/>
			<button id="btnUpdate">Update</button>
		</div>

 

-      사용자 아이디 (txtModifyUserId) 의 경우에는 수정이 불가하도록 readonly 옵션을 주어 처리한다.

 

ㄴ.  조회된 리스트 중 행 클릭 이벤트 처리 / 업데이트 처리 (Javascript / JQuery / Ajax)

-      앞서 조회된 리스트 테이블에서 1개의 행 (ROW)을 클릭하면 업데이트 폼 화면에 값을 출력하도록 이벤트를 처리한다.

 

for(var i = 0; i < data.length; i++) {
	          		setHtml += "<tr class='trClick'>"; // tr 클릭 이벤트 처리를 위해 클래스명을 추가
	          		setHtml += "<td>" + data[i].USER_ID + "</td>";
	          		setHtml += "<td>" + data[i].USER_PWD + "</td>";
	          		setHtml += "<td>" + data[i].USER_NAME + "</td>";
	          		setHtml += "<td>" + data[i].USER_TEL + "</td>";
	          		setHtml += "<td>" + data[i].USER_EMAIL + "</td>";
	          		setHtml += "<td>" + data[i].INPUT_DATETIME + "</td>";
	          		setHtml += "</tr>";
	          	}
$("#tbl").html(setHtml);
// 스크립트 내 위 구문 아래에 내용을 추가한다.
	          	
	          	// tr (행) 을 클릭한 경우 
	          	// td 값들을 업데이트 폼에 출력한다.
	          	$(".trClick").on("click", function() {
	          		var item = $(this)[0].childNodes;
	          		$("#txtModifyUserId").val(item[0].innerText);
	          		$("#txtModifyUserPwd").val(item[1].innerText);
	          		$("#txtModifyUserName").val(item[2].innerText);
	          		$("#txtModifyUserTel").val(item[3].innerText);
	          		$("#txtModifyUserEmail").val(item[4].innerText);
	          	});

 

-      업데이트 버튼에 대한 이벤트를 추가로 스크립트 작성을 해준다.

// 3. DATA UPDATE
	$("#btnUpdate").on("click", function() {
		var obj = {
				userId: $("#txtModifyUserId").val(),
				userPwd: $("#txtModifyUserPwd").val(),
				userName: $("#txtModifyUserName").val(),
				userTel: $("#txtModifyUserTel").val(),
				userEmail: $("#txtModifyUserEmail").val()
		}
		
		console.log(obj);
		
		$.ajax({
	        type: "POST",
	        url: "/main/updateList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("update success!!");
	          	console.log(data);
	        },
	        error: function() {
	          	console.log('update 통신실패!!');
	        }
      	});
	});

ㄷ.   컨트롤러 메소드 작성 (JAVA)

-      Ajax 를 통해 호출될 컨트롤러 메소드 작성을 위해 MainController.java 파일을 수정한다.

// 3. DATA UPDATE
    @RequestMapping("/main/updateList.do")
    @ResponseBody
    public Map<String, Object> updateList(@RequestBody Map<String, Object> params) {
    	
    	System.out.println("3. DATA UPDATE");
    	
    	mainMapper.updateList(params);
    	Map<String, Object> result = new HashMap<String, Object>();
    	result.put("result", true);
    	
        return result;
    }

 

-      Map 형태의 파라미터 정보를 전달받아 쿼리 호출 시 전달하여 준다.

-      1건에 대한 수정이므로 Map 형태의 파라미터를 화면으로부터 전달 받는다.

-      여러건인 경우에는 List<Map>으로 전달받아 반복문을 통해 처리한다.

 

ㄹ.   매퍼 인터페이스 및 쿼리 XML 작성 (JAVA / XML)

-      update 쿼리문 작성을 위한 쿼리 XML 파일 및 매퍼 인터페이스를 작성한다.

-      MainMapper.java 파일 내에 아래 내용을 추가

 

// 3. DATA UPDATE
	public void updateList(Map<String, Object> map);

 

-      MainMapper.xml 파일 내 update 쿼리 구문을 작성한다.

<!-- 3. DATA UPDATE -->
	<update id="updateList" parameterType="hashmap">
		UPDATE TBL_USER_INFO 
		   SET USER_PWD = #{userPwd}
			 , USER_NAME = #{userName}
			 , USER_TEL = #{userTel}
			 , USER_EMAIL = #{userEmail}
		 WHERE USER_ID = #{userId}
	</update>