ajax 연습 프로젝트

페이지 이동없이 Controller로 이동해서 데이터베이스 작업하고 싶을 때 > ajax 사용.

 

select 박스 값 변경 시 변경한 반의 학생 목록 조회 되게 구현

select 박스 선택할 때마다 > onchange 속성에서 함수 만들어줌.

<select id="classSelect" onchange="getStuList();">
	<option value="">전체</option>
		<th:block th:each="classInfo : ${classList}">
	<option th:value="${classInfo.classCode}">[[${classInfo.className}]]</option>
		</th:block>
</select>

목록 조회를 위해 쿼리 작성

	<!-- ajax 사용하여 select 박스 변경한 학생 목록 조회 -->
	<select id="getStuListAjax" resultMap="stu">
		SELECT STU_NUM
			, STU_NAME
			, STU_AGE
			, CLASS_NAME
		FROM AJAX_STUDENT STU, CLASS_INFO CLS
		WHERE STU.CLASS_CODE = CLS.CLASS_CODE
		WHERE CLS.CLASS_CODE = #{classCode}
		ORDER BY CLASS_NAME, STU_NAME
	</select>

service, serviceImpl 메소드 생성, 구현

 

Controller에서 메소드 실행하려면 classCode 필요함.

js에서 ajax 사용하여 데이터 받아 오면 됨.

먼저 select 박스에 id 부여한 것으로 js에서 value 받아옴.

변수로 저장하여 ajax에서 데이터 보내줌.

//셀렉트 박스 값 변경 시 학생 목록 조회
function getStuList(){
	//select한 학급 값
	const classCode = document.querySelector('#classSelect').value;
	
	//ajax start
	$.ajax({
		url: '/stu/listAjax', //요청경로
		type: 'post',
		data: {'classCode' : classCode}, //필요한 데이터
		success: function(result) {
			alert('ajax 통신 성공');
		},
	   error: function() {
		  alert('실패');
	   }
    });
//ajax end
}

Controller에서 js가 보낸 데이터 매개변수로 받고 메소드 실행.

	//학급 셀렉트 박스 변경 시 학생 목록 ajax로 조회
	@ResponseBody
	@PostMapping("/listAjax")
	public void listAjax(String classCode) { //js에서 던진 데이터 매개변수로 받기
		
		//select 박스로 선택한 학급의 학생 목록 조회
		studentService.getStuListAjax(classCode);	
	}

현재까지 select 박스에서 학급 선택하면 화면은 바뀌지 않음.

consol창에서 선택된 학급의 학생 목록 조회 되는 것 확인 가능

 

화면도 바꾸기 위해 화면상에서 제목 줄 빼고 테이블의 밑의 내용 부분 다 지우기.

지운 공간에 다시 선택한 학급 목록 조회 데이터 채우기

//셀렉트 박스 값 변경 시 학생 목록 조회
function getStuList(){
	//select한 학급 값
	const classCode = document.querySelector('#classSelect').value;
	
	//ajax start
	$.ajax({
		url: '/stu/listAjax', //요청경로
		type: 'post',    //위에서 받아온 학급 값 변수
		data: {'classCode' : classCode}, //Controller에 필요한 데이터 보내주기
		success: function(result) {
			//학생 목록 테이블의 모든 내용 삭제
			const tbodyTag = document.querySelector('.stuListTable > tbody')
			//부모태그.replaceChildren(); -> 선택한 부모 태그 안에서 ()안에 들어온 자식 태그를 변경하는 기능,
			//()안을 비우면 선택한 부모 태그 안의 모든 자식 태그 삭제
			tbodyTag.replaceChildren();
		},
	   error: function() {
		  alert('실패');
	   }
    });
//ajax end
}

Controller에서 select한 학급의 학생 목록 조회 데이터 return 해주기

	//학급 셀렉트 박스 변경 시 학생 목록 ajax로 조회
	@ResponseBody
	@PostMapping("/listAjax")
	public List<StudentVO> listAjax(String classCode) { //js에서 던진 데이터 매개변수로 받기
		
		//select 박스로 선택한 학급의 학생 목록 조회
		return studentService.getStuListAjax(classCode);
		
	}

return해준 데이터를 js에서 result값으로 들고 올 수 있다.

js에서 테이블 만들어서 result값로 테이블을 다시 채워주면 됨.

**조회된 학급의 학생 수만큼 (result에 들어간 데이터 수만큼) tr 만들어야 됨 > for문

태그 추가 문법 사용하여 테이블 추가

for문 돌릴 때 기본 for문을 사용. i값 이용하여 No 부분 채워줌.

//셀렉트 박스 값 변경 시 학생 목록 조회
function getStuList(){
	//select한 학급 값
	const classCode = document.querySelector('#classSelect').value;
	
	//ajax start
	$.ajax({
		url: '/stu/listAjax', //요청경로
		type: 'post',    //위에서 받아온 학급 값 변수
		data: {'classCode' : classCode}, //Controller에 필요한 데이터 보내주기
		success: function(result) {
			//학생 목록 테이블의 모든 내용 삭제
			const tbodyTag = document.querySelector('.stuListTable > tbody')
			//부모태그.replaceChildren(); -> 선택한 부모 태그 안에서 ()안에 들어온 자식 태그를 변경하는 기능,
			//()안을 비우면 선택한 부모 태그 안의 모든 자식 태그 삭제
			tbodyTag.replaceChildren();
			
			//선택한 학급 목록이 조회된 데이터로 다시 테이블의 내용을 채운다.
			//조회된 학급의 학생 수만큼 (result에 들어간 데이터 수만큼) tr 만들어야 됨 > for문
			let str = '';
				/*간단하지만 몇번째 도는지 알 수 없음
				for(const stu of result){
					str += '<tr>';
					str += '<td></td>';
					str += `<td>${stu.className}</td>`;
					str += `<td>${stu.stuName}</td>`;
					str += `<td>${stu.stuAge}</td>`;
					str += '</tr>';
					
				}
				*/
				
				//기본 for문 사용(No 채우기 위해서 i값 사용)
				for(let i = 0; i < result.length ; i++){
					str += '<tr>';
					str += `<td>${i + 1}</td>`; //역순으로 하고 싶을 때 result.length - i
					str += `<td>${result[i].className}</td>`;
					str += `<td><a href="javascript:void(0)" onclick="getScore(${result[i].stuNum});">${result[i].stuName}</a></td>`;
					str += `<td>${result[i].stuAge}</td>`;
					str += `<td><input type="button" value="삭제" onclick="goDelete(${result[i].stuNum}, this);"></td>`;
					str += '</tr>';
					
				}
				
				//tag.insertAdjacentHTML(‘추가할 위치’, ‘추가할 태그’)
				tbodyTag.insertAdjacentHTML('afterbegin', str) //선택한 태그가 시작되자 마자 태그를 추가
		},
	   error: function() {
		  alert('실패');
	   }
    });
//ajax end
}

 

현재까지 학급을 선택하면 학급의 학생 목록 조회 됨.

그러나 select 박스 전체로 선택하면 데이터 안 뜬다.

쿼리문 수정.

전체를 선택하면 쿼리 실행 x 그 외에 쿼리 실행  > 쿼리문에 if문 사용

	<!-- ajax 사용하여 select 박스 변경한 학생 목록 조회 -->
	<select id="getStuListAjax" resultMap="stu">
		SELECT STU_NUM
			, STU_NAME
			, STU_AGE
			, CLASS_NAME
		FROM AJAX_STUDENT STU, CLASS_INFO CLS
		WHERE STU.CLASS_CODE = CLS.CLASS_CODE    <!-- 문자열 비교 자바와 동일하게 equals-->
		<!-- if문에 test="" 대신 '' 쓰는 이유 문자열 비교 시 ""넣어야 됨 (if문에 test="" 넣으면 문자열 비교의 "" 인식x -->
		<!-- if문 안에서는 getter를 호출함. classCode는 String이기 때문에 getter 없음 > 오류. 1. 객체를 넘겨주면 getter로 받을 수 있음-->
		<if test='_parameter != null and !_parameter.equals("")'>
		AND CLS.CLASS_CODE = #{_parameter} <!-- 2. 하나의 데이터 넘겨줄 때는 _parameter(빈값 채우기 위해 넘어온 데이터를 들고옴) -->
		</if>
		ORDER BY CLASS_NAME, STU_NAME
	</select>

전체를 선택했을 때 콘솔에 쿼리 보면 and 조건이 빠진 것을 확인할 수 있다.

 

 

학생명 클릭 시 우측 빈공간에 해당 학생의 점수 정보 조회

학생명 나오는 태그에 a태그의 기본 기능 href 속성 사용 X > 페이지 이동 됨. 

a태그에도 onclick 속성 사용 가능 아래처럼 href에 작성하면 페이지 이동 기능 작동X

<td><a href="javascript:void(0);" onclick="getScore();">[[${stu.stuName}]]</a></td>

쿼리 작성시 STU_NAME 필요 resultMap에 추가 ScoreVO에도 추가

<select id="getScore" resultMap="score">
		SELECT SCORE_NUM
			, KOR_SCORE
			, ENG_SCORE
			, MATH_SCORE
			, (SELECT STU_NAME 
				FROM AJAX_STUDENT
				WHERE STU_NUM = STUDENT_SCORE.STU_NUM) AS STU_NAME
		FROM STUDENT_SCORE
		WHERE STU_NUM = #{stuNum}
	</select>

 

학생명 클릭하면 stuNum도 같이 가지고 와야 됨. > 쿼리 빈 값 채워주기 위해

<td><a href="javascript:void(0);" th:onclick="getScore([[${stu.stuNum}]]);">[[${stu.stuName}]]</a></td>

 

js에 함수 생성 후 ajax 사용

html에서 넘겨준 stuNum 매개변수로 받고 Controller에서 stuNum 사용하기 위해 데이터 넘겨줌.

//학생 이름 클릭 시 학생 점수 조회
function getScore(stuNum){
	//ajax start
	$.ajax({
	   url: '/score/getScore', //요청경로
	   type: 'post',
	   data: {'stuNum' : stuNum}, //Controller에 필요한 데이터 넘겨줌
	   success: function(result) {
	 
	   },
	   error: function() {
	      alert('실패');
	   }
	});
//ajax end	
}

ScoreController에서 성적 조회 메소드 실행하여 js로 return

@Controller
@RequestMapping("/score")
public class ScoreController {
	
	@Resource(name = "scoreService")
	private ScoreService scoreService;
	
	//학생명 클릭 시 성적 조회
	@ResponseBody //페이지 이동X인 것 지정
	@PostMapping("/getScore")
	public ScoreVO getStuScore(int stuNum) {
		
		return scoreService.getScore(stuNum);
		
	}

}

html로 돌아와서 score정보가 나올 공간 div로 만든 후 js에서 테이블 그리고

태그 추가해서 테이블 나오게 

평균은 미리 구해서 변수로 줌

//학생 이름 클릭 시 학생 점수 조회
function getScore(stuNum){
	//ajax start
	$.ajax({
	   url: '/score/getScore', //요청경로
	   type: 'post',
	   data: {'stuNum' : stuNum}, //Controller에 필요한 데이터 넘겨줌
	   success: function(result) {
	      const divTag = document.querySelector('.scoreDiv')
	      
	      //점수 평균
	      const avg = (result.korScore + result.engScore + result.mathScore) / 3
	      
	      //점수 정보 나올 테이블
	      let str = '';
	      
		   	str  += ` <table>                      ` ;
			str	 += `		<tr>                   ` ;
			str	 += `			<td>이름</td>      ` ;
			str	 += `			<td>${result.stuName}</td>` ;
			str	 += `		</tr>                  ` ;
			str	 += `		<tr>                   ` ;
			str	 += `			<td>국어점수</td>  ` ;
			str	 += `			<td>${result.korScore}</td>` ;
			str	 += `		</tr>                  ` ;
			str	 += `		<tr>                   ` ;
			str	 += `			<td>영어점수</td>  ` ;
			str	 += `			<td>${result.engScore}</td>` ;
			str	 += `		</tr>                  ` ;
			str	 += `		<tr>                   ` ;
			str	 += `			<td>수학점수</td>  ` ;
			str	 += `			<td>${result.mathScore}</td>` ;
			str	 += `		</tr>                  ` ;
			str	 += `		<tr>                   ` ;
			str	 += `			<td>평균</td>      ` ;
			str	 += `			<td>${avg}</td>          ` ;
			str	 += `		</tr>                  ` ;
			str	 += `	</table>                   ` ;
			
			divTag.replaceChildren();
			divTag.insertAdjacentHTML('afterbegin', str);
	 
	   },
	   error: function() {
	      alert('실패');
	   }
	});
//ajax end	
}

 

현재 상태에서 문제

1. 전체 데이터에서 이름 클릭 가능하다. 그러나 select 박스로 학급 바꾸면 이름 클릭 불가

개발자모드로 확인하면 학급 바꾸면 a태그 코드가 없음.

> js의 ajax에서 for문 돌면서 그냥 테이블만 그려줌. a태그 없는 상태임.

ajax에서 만든 테이블도 a태그 추가해줘야한다.

 

2. db에 없는 학생의 점수를 조회하면 undefined(오류) 뜸 

예를 들어 시스템 상으로 보면 채점을 안 한 학생은 점수가 0으로 뜨게 설정.

쿼리 수정해야 함.

수정 이유 : 이전 작성한 쿼리는 점수 없는 학생 조회 못 하기 때문에

	<select id="getScore" resultMap="score">
		SELECT SCORE_NUM
	    	, NVL(KOR_SCORE, 0) KOR_SCORE
	   		, NVL(ENG_SCORE, 0) ENG_SCORE
	    	, NVL(MATH_SCORE, 0) MATH_SCORE
	    	, STU_NAME
		FROM STUDENT_SCORE SCORE, AJAX_STUDENT STU
		WHERE SCORE.STU_NUM(+) = STU.STU_NUM 
		<!-- SCORE 테이블에는 11번이 없어서 데이터 안 나옴. > (+)추가 : NULL 나옴 > 0으로 바꾸기 -->
		AND STU.STU_NUM = #{stuNum}
	</select>

 

 

ajax 사용하여 학생 삭제 기능

html에 삭제 버튼 input 태그로 추가 onclick 속성으로 js로 이동, 해당 학생 삭제 > stuNum 넘겨준다.

학생 삭제 메소드 실행 후 js로 돌아와서 삭제한 학생이 화면에서 지워지게 작업.

삭제 버튼을 기준으로 지울 태그 찾아가기 위해 삭제 버튼 태그 자체를 this로 넘겨준다.

<tbody>
	<tr th:each="stu, state : ${stuList}">
		<td>[[${state.count}]]</td>
		<td>[[${stu.className}]]</td>
		<td><a href="javascript:void(0);" th:onclick="getScore([[${stu.stuNum}]]);">[[${stu.stuName}]]</a></td>
		<td>[[${stu.stuAge}]]</td>
		<td><input type="button" value="삭제" th:onclick="goDelete([[${stu.stuNum}]], this);"></td>
	</tr>
</tbody>

js 학생 삭제 함수 생성.

html에서 넘겨준 두 데이터 stuNum, this를 js에서 매개변수로 받아줌.

Controller로 이동하면서 stuNum 가져가기(쿼리 빈값 채워주기 위해)

//학생 삭제            내가 클릭한 삭제 버튼(this)
function goDelete(stuNum, selectedTag){
	
	//ajax start
	$.ajax({
	   url: '/stu/stuDelete', //요청경로
	   type: 'post',
	   data: {'stuNum' : stuNum}, //필요한 데이터
	   success: function(result) {
	   },
	   error: function() {
	      alert('실패');
	   }
	});
//ajax end
}

StudentMapper로 가서 학생 삭제 쿼리 작성.

	<!-- 학생 삭제 -->
	<delete id="stuDelete">
		DELETE AJAX_STUDENT
		WHERE STU_NUM = #{stuNum}
	</delete>

StudentService에 메소드 생성

	//학생 삭제(ajax)
	int stuDelete(int stuNum);

StudentServiceImpl 메소드 구현

	//학생 삭제(ajax)
	@Override
	public int stuDelete(int stuNum) {
		return sqlSession.delete("stuMapper.stuDelete", stuNum);
	}

StudentController로 와서 메소드 실행

//학생 삭제
	@ResponseBody
	@PostMapping("/stuDelete")
	public int stuDelete(int stuNum) {
		//자료형 int > 1행이 삭제 > return 값 1이 됨.
		return studentService.stuDelete(stuNum);
		
	}

메소드 실행 후 js로 돌아와 삭제 학생 화면에서 지우는 작업 해주기.

내가 클릭한 삭제 버튼을 기준으로 태그를 선택하여 그 태그 지워주면 화면상에서도 학생 삭제됨.

태그 찾아가는 방법 2가지, 편한 것 사용.

//학생 삭제            내가 클릭한 삭제 버튼(this)
function goDelete(stuNum, selectedTag){
	
	//ajax start
	$.ajax({
	   url: '/stu/stuDelete', //요청경로
	   type: 'post',
	   data: {'stuNum' : stuNum}, //필요한 데이터
	   success: function(result) {
		if(result == 1){ //result에는 삭제 성공 시 return값 1이 저장됨.
			alert('학생이 삭제되었습니다.')
			//방법1. 삭제 버튼(this)를 기준으로 부모태그인 td의 부모태그 tr을 지움
			//selectedTag.parentElement.parentElement.remove();
			
			//방법2. 선택한 태그를 감싼 부모태그 중 가장 가까운 태그를 찾아감
			selectedTag.closest('tr').remove();
		}
		else {
			alert('예기치 않은 오류가 발생했습니다.')
		}
				
	   },
	   error: function() {
	      alert('실패');
	   }
	});
//ajax end
}