Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

게으른 완벽주의자의 개발자 도전기

[ajax]학생정보시스템 학생정보삭제, 점수정보 삭제 본문

Spring Boot

[ajax]학생정보시스템 학생정보삭제, 점수정보 삭제

머리방울 2022. 9. 12. 22:12

1. mapper

 학생정보 삭제  
<delete id="deleteStu">
	DELETE STUDENT_INFO 
	WHERE STU_NUM = #{stuNum}
</delete>

 성적 삭제 
<delete id="deleteScore">
	DELETE SCORE_INFO
	WHERE STU_NUM = #{stuNum}
</delete>

2. 인터페이스, serviceImpl

학생정보 삭제
void deleteStu(int stuNum);

학생정보 삭제
@Override
트랜잭션 처리
@Transactional(rollbackFor = Exception.class)
	★rollbackFor :어떤 예외가 발생했을 때 rollback 할 것인지 작성
	메소드 정상 실행되면 커밋된다 (exception이 모든 예외의 대빵)
	★자식 먼저 삭제 후 부모 삭제해야 함 그래서 점수 데이터 지우고 학생데이터 지운다
	
    public void deleteStu(int stuNum) {
		sqlSession.delete("stuMapper.deleteScore", stuNum);
		sqlSession.delete("stuMapper.deleteStu", stuNum);
		
	}

 

3. controller

 학생정보 삭제
 @ResponseBody
 @PostMapping("/deleteStu")	

★js에선 변수명을 stu_num 이런식으로 사용한다
그래서 @RequestParam(name="stu_num")으로 데이터 보낸것을 변수로 받겠다 작성

public void deleteStu(@RequestParam(name="stu_num") int stuNum) {
	학생삭제와 성적삭제
	 stuService.deleteStu(stuNum);
}

4. js 삭제 함수

삭제버튼 클릭 시 (selectedTag = this)
function deleteStu(stu_num, selectedTag){
	const result = confirm('정말 삭제하시겠습니까?')
	
	if (result) {
		deleteStuAjax(stu_num, selectedTag)
	}
	
}

ajax 함수(삭제 클릭 시 실행되는 ajax)
function deleteStuAjax(stu_num, selectedTag) {

	$.ajax({
		url: '/stu/deleteStu', 요청경로
		type: 'post',
		data: {'stu_num': stu_num }, 필요한 데이터

		success: function(result) {
			
            1. 내가 클릭한 삭제 버튼 선택
			selectedTag.parent.parent.remove();
			
            2. closest('tr') 자신을 감싸고 있는 가장 가까운 tr 찾아감
			selectedTag.closest('tr').remove();

			alert('삭제되었습니다.');

		},
		error: function() {
			alert('실패');
		}
	});