Spring에서 Ajax 사용하기 - 실전편 (POST) (23.08.18)

현·2023년 8월 18일
Spring
0

Spring

목록 보기
15/36
post-thumbnail

🌷 Spring에서 Ajax 사용하기 - 실전편 (POST)


⏬ 이전 포스팅에서 개념 알기 ⏬
Spring에서 Ajax 사용하기 - 이론편

👀 코드로 살펴보기

🌼 이메일로 회원 정보 조회

🌱 main.jsp

...
                <h3>이메일을 입력받아 일치하는 회원의 정보를 조회</h3>
                email : <input type="text" id="inputEmail">
                <button id="btn2">조회</button>
                <ul id="result2">
                </ul>
...

🌱 main.js

// 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 = "일치하는 회원이 없습니다.";
    })
})

🌱 AjaxController.java

...
	// 이메일로 회원 정보 조회
	@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);
	}

🌱 AjaxService.java

...
	/** 이메일로 회원 정보 조회
	 * @param email
	 * @return member
	 */
	Member selectMember(String email);

🌱 AjaxServiceImpl.java

...
	// 이메일로 회원 정보 조회
	@Override
	public Member selectMember(String email) {
		return dao.selectMember(email);
	}

🌱 AjaxDAO.java

...
	/** 이메일로 회원 정보 조회
	 * @param email
	 * @return member
	 */
	public Member selectMember(String email) {
		return sqlSession.selectOne("ajaxMapper.selectMember", email);
	}

🌱 ajax-mapper.xml

	...
	<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 창에 이메일을 입력하면 해당 회원의 정보가 리스트 형태로 출력되는 것을 볼 수 있다.

또한 콘솔에도 출력되는 모습. 😉

🌼 이메일이 일부라도 일치하는 모든 회원 조회

🌱 main.jsp

...
                <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>
...

🌱 main.js

...
// 이메일이 일부라도 일치하는 모든 회원 조회
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)
    })
})

🌱 AjaxController.java

...
	// 이메일이 일부라도 일치하는 모든 회원 조회
	@PostMapping(value="/selectMemberList", produces="application/json; charset=UTF-8")
	@ResponseBody
	public List<Member> selectMemberList(@RequestBody String input) {

		return service.selectMemberList(input);
	}

🌱 AjaxService.java

...
	/** 이메일이 일부라도 일치하는 모든 회원 조회
	 * @param input
	 * @return memberList
	 */
	List<Member> selectMemberList(String input);

🌱 AjaxServiceImpl.java

...
	// 이메일이 일부라도 일치하는 모든 회원 조회
	@Override
	public List<Member> selectMemberList(String input) {
		return dao.selectMemberList(input);
	}

🌱 AjaxDAO.java

...
	/** 이메일이 일부라도 일치하는 모든 회원 조회
	 * @param input
	 * @return memberList
	 */
	public List<Member> selectMemberList(String input) {
		return sqlSession.selectList("ajaxMapper.selectMemberList", input);
	}

🌱 ajax-mapper.xml

...
	<!-- 이메일이 일부라도 일치하는 모든 회원 조회 -->
	<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>

이때 ${input}을 사용한 이유는? 🤔

#{}으로 작성하면 '%' 값 '%' 형태로 SQL이 정상적인 형태가 아니게 되기 때문에
'값'을 감싸고 있는 '' 제거하기 위해서 쓴 것이다.

💻 출력 화면

  • 조회 결과가 없을 때

  • 조회 결과가 있을 때

검색어에 입력된 값이 포함된 회원의 정보가 조회된다.

profile
현
풀스택 개발자 기록집 📁
이전 포스트

Spring에서 Ajax 사용하기 - 실전편 (GET) (23.08.17)

다음 포스트

SMTP로 이메일 인증 기능 구현하기 (23.08.18)

0개의 댓글