⏬ 이전 포스팅에서 개념 알기 ⏬
Spring에서 Ajax 사용하기 - 이론편
...
<h3>이메일을 입력받아 일치하는 회원의 정보를 조회</h3>
email : <input type="text" id="inputEmail">
<button id="btn2">조회</button>
<ul id="result2">
</ul>
...
// fetch() API를 이용한 POST 방식 요청
// 이메일을 입력받아 일치하는 회원의 정보를 모두 조회
const inputEmail = document.getElementById("inputEmail");
const btn2 = document.getElementById("btn2");
const result2 = document.getElementById("result2");
btn2.addEventListener("click", ()=>{
// POST 방식 비동기 요청
// JSON.stringify() : JS 객체 -> JSON
// JSON.parse() : JSON -> JS 객체
fetch("/selectMember", {
method : "POST",
headers : {"Content-Type" : "application/json"},
body : JSON.stringify({"email" : inputEmail.value})
})
.then(resp => resp.json()) // 응답 객체를 매개변수로 얻어와 파싱
.then(member => {
console.log(member);
// ul(#result2)의 내부 내용 모두 없애기
result2.innerText = "";
const li1 = document.createElement("li");
li1.innerText = `회원 번호 : ${member.memberNo}`;
const li2 = document.createElement("li");
li2.innerText = `이메일 : ${member.memberEmail}`;
const li3 = document.createElement("li");
li3.innerText = `닉네임 : ${member.memberNickname}`;
const li4 = document.createElement("li");
li4.innerText = `전화번호 : ${member.memberTel}`;
const li5 = document.createElement("li");
li5.innerText = `주소 : ${member.memberAddress}`;
const li6 = document.createElement("li");
li6.innerText = `가입일 : ${member.enrollDate}`;
result2.append(li1, li2, li3, li4, li5, li6);
}) // 파싱한 데이터를 이용해서 비동기 처리 후 동작
.catch(err => {
console.log(err)
result2.innerText = "일치하는 회원이 없습니다.";
})
})
...
// 이메일로 회원 정보 조회
@PostMapping(value="/selectMember", produces = "application/json; charset=UTF-8")
@ResponseBody // Java 데이터 -> JSON, TEXT로 변환 + 비동기 요청한 곳으로 응답
public Member selectMember(@RequestBody Map<String, Object> paramMap) {
// @RequestBody Map<String, Object> paramMap
// -> 요청된 HTTP Body에 담긴 모든 데이터를 Map으로 반환
String email = (String)paramMap.get("email");
return service.selectMember(email);
}
...
/** 이메일로 회원 정보 조회
* @param email
* @return member
*/
Member selectMember(String email);
...
// 이메일로 회원 정보 조회
@Override
public Member selectMember(String email) {
return dao.selectMember(email);
}
...
/** 이메일로 회원 정보 조회
* @param email
* @return member
*/
public Member selectMember(String email) {
return sqlSession.selectOne("ajaxMapper.selectMember", email);
}
...
<resultMap type="Member" id="member_rm">
<!-- DB의 기본 키(복합키라면 여러 개 작성) -->
<id property="memberNo" column="MEMBER_NO"/>
<!-- DB의 일반 컬럼들 -->
<result property="memberEmail" column="MEMBER_EMAIL"/>
<result property="memberPw" column="MEMBER_PW"/>
<result property="memberNickname" column="MEMBER_NICKNAME"/>
<result property="memberTel" column="MEMBER_TEL"/>
<result property="memberAddress" column="MEMBER_ADDR"/>
<result property="profileImage" column="PROFILE_IMG"/>
<result property="enrollDate" column="ENROLL_DATE"/>
<result property="memberDeleteFlag" column="MEMBER_DEL_FL"/>
<result property="authority" column="AUTHORITY"/>
</resultMap>
<!-- resultMap은 언제 사용?
조회 결과 컬럼명과 DTO의 필드명이 다를 때 사용
-->
<!-- 이메일로 회원 정보 조회 -->
<select id="selectMember" resultMap="member_rm">
SELECT MEMBER_NO, MEMBER_EMAIL, MEMBER_NICKNAME, MEMBER_TEL,
NVL(MEMBER_ADDR, '미작성') MEMBER_ADDR,
TO_CHAR(ENROLL_DATE, 'YYYY"년" MM"월" DD"일" HH24"시" MI"분" SS"초"') ENROLL_DATE
FROM MEMBER
WHERE MEMBER_EMAIL = #{email}
AND MEMBER_DEL_FL = 'N'
</select>
input 창에 이메일을 입력하면 해당 회원의 정보가 리스트 형태로 출력되는 것을 볼 수 있다.
또한 콘솔에도 출력되는 모습. 😉
...
<h3>이메일이 일부라도 일치하는 모든 회원 조회</h3>
검색어 : <input type="text" id="input">
<button id="btn3">조회</button>
<table border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>회원번호</th>
<th>이메일</th>
<th>닉네임</th>
</tr>
</thead>
<tbody id="result3">
<tr>
<td>1</td>
<td>user01@kh.or.kr</td>
<td>유저일</td>
</tr>
</tbody>
</table>
...
...
// 이메일이 일부라도 일치하는 모든 회원 조회
const input = document.getElementById("input");
const btn3 = document.getElementById("btn3");
const result3 = document.getElementById("result3");
btn3.addEventListener("click", ()=>{
fetch("/selectMemberList",{
method : "POST",
headers: {"Content-Type" : "application/text"}, // 문자열 하나를 파라미터로 전달
body : input.value // 보내질 문자열 하나
})
.then(resp => resp.json())
.then(memberList => {
console.log(memberList);
result3.innerHTML = "";
if(memberList.length == 0){
result3.innerHTML = "조회 결과가 없습니다";
return;
}
// 향상된 for문으로 memberList 순차 접근
for(let member of memberList){
// tr, td 만들어서 result3에 추가
const tr = document.createElement("tr");
const td1 = document.createElement("td");
td1.innerText = member.memberNo;
const td2 = document.createElement("td");
td2.innerText = member.memberEmail;
const td3 = document.createElement("td");
td3.innerText = member.memberNickname;
// 1) tr의 자식으로 td1, td2, td3 추가
tr.append(td1, td2, td3);
// 2) result3의 자식으로 tr 추가
result3.append(tr);
}
})
.catch(err => {
console.log(err)
})
})
...
// 이메일이 일부라도 일치하는 모든 회원 조회
@PostMapping(value="/selectMemberList", produces="application/json; charset=UTF-8")
@ResponseBody
public List<Member> selectMemberList(@RequestBody String input) {
return service.selectMemberList(input);
}
...
/** 이메일이 일부라도 일치하는 모든 회원 조회
* @param input
* @return memberList
*/
List<Member> selectMemberList(String input);
...
// 이메일이 일부라도 일치하는 모든 회원 조회
@Override
public List<Member> selectMemberList(String input) {
return dao.selectMemberList(input);
}
...
/** 이메일이 일부라도 일치하는 모든 회원 조회
* @param input
* @return memberList
*/
public List<Member> selectMemberList(String input) {
return sqlSession.selectList("ajaxMapper.selectMemberList", input);
}
...
<!-- 이메일이 일부라도 일치하는 모든 회원 조회 -->
<select id="selectMemberList" resultMap="member_rm">
SELECT MEMBER_NO, MEMBER_EMAIL, MEMBER_NICKNAME
FROM MEMBER
WHERE MEMBER_DEL_FL = 'N'
AND MEMBER_EMAIL LIKE '%${input}%'
ORDER BY MEMBER_NO
</select>
#{}
으로 작성하면 '%' 값 '%' 형태로 SQL이 정상적인 형태가 아니게 되기 때문에
'값'을 감싸고 있는 '' 제거하기 위해서 쓴 것이다.
검색어에 입력된 값이 포함된 회원의 정보가 조회된다.