[Spring] ajax 이용하기 | 자바스크립트의 fetch() 함수 ② POST 방식

➰ fetch() API ( fetch : 가지고오다)

: JS의 Promise객체를 이용한 비동기 요청 방법으로 JS에서 기본 제공함

- Promise(약속) 객체 : 비동기 요청에 대한 처리가 완료되면 바로 결과를 제공하겠다고 약속

 

📂 POST 방식

① 요청 작성 방법 

fetch("요청주소“, { // 지정된 주소로 비동기 요청(ajax)
	method : “POST”, // 데이터 전달 방식을 POST로 지정
	headers: {"Content-Type": "application/json"}, // 요청 데이터의 형식을 JSON으로 지정
	body : JSON.stringify( {K:V, K:V} ) // JS객체를 JSON 형태로 변환하여 Body에 추가
})

.then(response => response 파싱 ) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱

.then(response 파싱 데이터 => {}); // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성

.catch( err => {}) // 예외 발생 시 처리할 내용을 작성

 

② 요청 데이터 얻어오는 방법 

HTTP 요청 Body에 파라미터가 담겨 있으므로 
@RequestBody를 통해 값(JSON)을 얻어와 Java 객체로 변환(HttpMessageConverter)

 

③ 요청 데이터 얻어오는 방법 ( GET / POST 동일) 

GET/POST 방식 모두 @ResponseBody를 이용해 반환
-> 해당 어노테이션을 작성하면 Controller에서 반환되는 값이 
   ViewResolver가 아닌 HttpMessageConverter로 전달되어
   반환된 Java객체를 text/JSON으로 변환 후 비동기 요청을 한 곳으로 응답함

---

💻 코드로 확인하기 🖱 

📝 이메일로 닉네임 조회 📝 

👓 Main.js

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

@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

 

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

👓 AjaxServiceImpI

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

👓 AjaxServiceImpI

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

👓 AjaxDAO

<!-- 이메일이 일부라도 일치하는 모든 회원 조회 -->
<select id="selectMemberList" resultMap="member_rm" >
    SELECT MEMBER_NO, MEMBER_EMAIL,MEMBER_NICKNAME FROM
    MEMBER
    WHERE MEMBER_EMAIL LIKE '%${input}%'
    AND MEMBER_DEL_FL ='N'
    ORDER BY MEMBER_NO
</select>

<!-- 
    ${input} 을 사용한 이유 ? 
    #{}으로 작성하면 '%' 값 '%' 형태로 
    SQL이 정상적인 형태가 아니게 되기 때문에 '값'을 감사고 있는 ''제거하기 위해서

 -->

🔮 출력화면