728x90
➰ 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이 정상적인 형태가 아니게 되기 때문에 '값'을 감사고 있는 ''제거하기 위해서
-->
🔮 출력화면
728x90
'ON > spring' 카테고리의 다른 글
[ Spring ] Interceptor란 ? (0) | 2023.08.21 |
---|---|
[ Spring ] 이메일 인증 기능 - SMTP (0) | 2023.08.21 |
[Spring] ajax 이용하기 | 자바스크립트의 fetch() 함수 ① GET 방식 (0) | 2023.08.17 |
[Spring] 필터 | 비밀번호 변경 | 회원 탈퇴 | 회원가입 (유효성검사) ④ (0) | 2023.08.16 |
[Spring] 드롭다운 메뉴 | 회원정보 수정 ③ (0) | 2023.08.14 |