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

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

4.     DELETE

ㄱ.   화면 뷰 수정 (JSP)

- 앞서 업데이트 폼 아래의 업데이트 버튼과 함께 삭제 버튼을 1개 추가하여 준다.

<P> 3. DATA UPDATE/ 4. DATA DELETE </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>
		<!-- 추가된 버튼 (삭제 버튼) -->
		<button id="btnDelete">Delete</button>
	</div>

 

ㄴ.   삭제 버튼 클릭 이벤트 처리 (Javascript / JQuery / Ajax)

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

- 사용자 아이디를 키로 하기 때문에 파라미터에는 사용자 아이디만 담아주어도 된다.

// 4. DATA DELETE
	$("#btnDelete").on("click", function() {
		var obj = {
				userId: $("#txtModifyUserId").val()
		}
		
		$.ajax({
	        type: "POST",
	        url: "/main/deleteList.do",
	        contentType: "application/json;charset=UTF-8",
	        data: JSON.stringify(obj),
	        dataType: "json",
	        success: function(data) {
	        	console.log("delete success!!");
	          	console.log(data);
	        },
	        error: function() {
	          	console.log('delete 통신실패!!');
	        }
      	});
	});

 

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

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

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

 

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

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

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

 

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

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

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

// 4. DATA DELETE
	public void deleteList(Map<String, Object> map);

 

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

<!-- 4. DATA DELETE -->
	<delete id="deleteList" parameterType="hashmap">
		DELETE FROM TBL_USER_INFO 
		 WHERE USER_ID = #{userId}
	</delete>