Spring Boot
[Ajax] 학생정보시스템 목록 조회, 학급별 목록 조회 (insertAdjacentHTML)
머리방울
2022. 9. 12. 21:13
목록조회(학생목록조회 -> ajax 사용하지 않음, 학급목록조회 -> ajax 사용)
1. mapper
1. 학급목록 조회
<select id="classInfo" resultMap="classInfo">
SELECT CLASS_CODE
, CLASS_NAME
FROM CLASS_INFO
ORDER BY CLASS_CODE
</select>
2. 학생목록정보
<select id="stuInfo" resultMap="student">
방법1 조인
SELECT STU_NUM
, STU_NAME
, STU_AGE
, CLASS_NAME
FROM STUDENT_INFO S, CLASS_INFO C
WHERE S.CLASS_CODE = C.CLASS_CODE
<if test="_parameter!=0">
AND S.CLASS_CODE = #{classCode}
</if>
ORDER BY STU_NUM
방법2 서브쿼리
SELECT STU_NUM
, STU_NAME
, STU_AGE
, (SELECT CLASS_NAME
FROM CLASS_INFO
WHERE CLASS_CODE = S.CLASS_CODE) AS CLASS_NAME
FROM STUDENT_INFO S
<if test="_parameter!=0">
★ int넘기니까 getter 사용불가
controller에서 전체 목록조회 시 classCode를 0으로 줬기 때문에
0이 아닐때만 실행 되도록 한다.
즉, classCode가 1,2,3 일 때는 자바반, 캐드반, 디자인반이 선택된다
WHERE CLASS_CODE = #{classCode}
</if>
ORDER BY STU_NUM
</select>
3. mapper
<mapper namespace="stuMapper">
<resultMap type="kh.study.ajax.vo.ClassVO" id="classInfo">
<id column="CLASS_CODE" property="classCode"/>
<result column="CLASS_NAME" property="className"/>
</resultMap>
<resultMap type="kh.study.ajax.vo.StudentVO" id="student">
<id column="STU_NUM" property="stuNum"/>
<result column="STU_AGE" property="stuAge"/>
<result column="CLASS_CODE" property="classCode"/>
<result column="STU_NAME" property="stuName"/>
<result column="CLASS_NAME" property="className"/>
</resultMap>2. 인터페이스, serviceImpl
학급목록
List<ClassVO> classInfo();
학생목록
List<StudentVO> stuInfo(int classCode);
@Service("stuService")
public class StudentServiceImpl implements StudentService {
@Autowired
SqlSessionTemplate sqlSession;
학급목록
@Override
public List<ClassVO> classInfo() {
return sqlSession.selectList("stuMapper.classInfo");
}
학생목록, select박스에서 번호 선택했을때 실행되도록 classCode 넣음
@Override
public List<StudentVO> stuInfo(int classCode) {
return sqlSession.selectList("stuMapper.stuInfo", classCode);
}
3. controller
@Controller
@RequestMapping("/stu")
public class StuController {
@Resource(name = "stuService")
private StudentService stuService;
학생목록화면
@GetMapping("/list")
public String selectStuList(Model model) {
model.addAttribute("classInfo", stuService.classInfo());
model.addAttribute("stuInfo", stuService.stuInfo(0));
return "stu_manage";
}
@ResponseBody
@PostMapping("/getStuListAjax")
public List<StudentVO> getStuListAjax(int classCode) {
선택된 학급의 학생 목록 조회
List<StudentVO> list = stuService.stuInfo(classCode);
데이터 넘기기
return list;
}
4. html
<body>
<table class="layout">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tr>
<td>
<div style="margin-bottom: 30px;">
<select name="classCode" onchange="changeClass();">
(onchange(); 변화 JS 작성)
<option selected value="0">전체</option>
<option th:each="classInfo:${classInfo}"
th:text="${classInfo.className}"
th:value="${classInfo.classCode}"></option>
</select>
</div>
<div>
<table class="stu">
<thead>
<tr>
<td>학번</td>
<td>이름</td>
<td>나이</td>
<td>학급명</td>
<td></td>
</tr>
</thead>
<tbody>
<tr th:each="stu : ${stuInfo}">
<td th:text="${stu.stuNum}"></td>
<td><span th:text="${stu.stuName}"</td>
<td th:text="${stu.stuAge}"></td>
<td th:text="${stu.className}"></td>
<td><input type="button" value="삭제"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td id="detailTd"></td>
</tr>
</table>
<script src="https://code.jquery.com/
jquery-latest.min.js"></script>
<★jquery 실행>
<script type="text/javascript" th:src="@{/stu_manage.js}"></script>
★static폴더 기준
</body>5. onchange(); js
학급이 변경될 때 실행되는 함수(onchange();)
function changeClass(){
1) classCode값 가져오기
const classCode = document.querySelector('select').value
2) ajax 시작
$.ajax({
url: '/stu/getStuListAjax', ,<-요청경로
type: 'post',
data: {'classCode': classCode}, <-필요한 데이터
3)쿼리작업 끝난 후
success: function(result) { ★return 값 받음
controller 실행 후 자동실행 할 구문
i) 테이블을 다시 그려준다(테이블의 thead, tbody 만들기)
const stuList = document.querySelector('.stu');
(테이블에 class ="stu"로 지정함)
2) tbody 삭제
★select에서 학급을 선택했을 때
기존 내역 삭제하기 위해 tbody 내용 지우기
thead는 동일하니까
//const tbody = document.querySelector('stu > tbody'); 방법도 가능
const tbody = stuList.querySelector('tbody');
stuList.removeChild(tbody);
3) 추가할 태그 생성
let str = '';
4) 새로 들어갈 내용
str += '<tbody>';
for (const stu of result) {
str += '<tr>';
str += `<td>${stu.stuNum}</td>`;
str += `<td>`;
(★stuNum 넘겨줘야 반이 바뀌어도 점수 상세정보 볼 수 있음)
str += `<span onclick="showDetail(${stu.stuNum});">
${stu.stuName}</span>`;
str += `</td>`;
str += `<td>${stu.stuAge}</td>`;
str += `<td>${stu.className}</td>`;
str += `<td><input type="button" value="삭제"
onclick="deleteStu(${stu.stuNum}, this);"></td>`;
str += '</tr>';
}
str += '</tbody>';
stuList.insertAdjacentHTML('beforeend',str);
},
error: function() {
alert('실패');
}
});
4) ajax 끝
insertAdjacentHTML
출처: https://saeatechnote.tistory.com/entry/insertAdjacentHTML-과-innerHTML의-차이 [새아의 테크노트:티스토리]
beforebegin: 선택한 태그 앞에 추가하겠다
afterbegin: 선택한 태그의 첫번째 자식으로 추가하겠다
beforeend: 선택한 태그의 마지막 자식으로 추가하겠다
afterend: 선택한 태그의 뒤에 추가하겠다