고래씌
[Spring] 5. 비동기 요청 처리 기능(아이디 중복검사, 회원 정보 조회) 본문
1. 아이디 중복검사
▶ memberErollForm.jsp
=> 아이디 중복체크를 위해 idCheck() 함수를 이용할 것!
=> 밑에 script 에 다음과 같이 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outer{
background:black;
color:white;
width:1000px;
margin:auto;
margin-top:50px;
}
#enroll-form table {margin:auto;}
#enroll-form input {margin:5px;}
</style>
</head>
<body>
<jsp:include page="/WEB-INF/views/common/header.jsp"></jsp:include>
<div class="outer">
<br>
<h2 align="center">회원가입</h2>
<form id="enroll-form" action="<%=request.getContextPath() %>/insert.me" method="post">
<!-- 회원가입form안에.txt -->
<table align="center">
<tr>
<td>* ID</td>
<td><input type="text" name="userId" required>
<button type="button" onclick="idCheck();">아이디중복체크</button>
</td>
</tr>
<tr>
<td>* PWD</td>
<td><input type="password" name="userPwd" required></td>
</tr>
<tr>
<td>* NAME</td>
<td><input type="text" name="userName" required></td>
</tr>
<tr>
<td> EMAIL</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td> BIRTHDAY</td>
<td><input type="text" name="birthday" placeholder="생년월일(6자리)"></td>
</tr>
<tr>
<td> GENDER</td>
<td align="center">
<input type="radio" name="gender" value="M" checked> 남
<input type="radio" name="gender" value="F"> 여
</td>
</tr>
<tr>
<td> PHONE</td>
<td><input type="text" name="phone" placeholder="-포함"></td>
</tr>
<tr>
<td> ADDRESS</td>
<td><input type="text" name="address"></td>
</tr>
</table>
<br>
<div align="center">
<button type="reset">초기화</button>
<button type="submit">회원가입</button>
</div>
</form>
</div>
<script>
function idCheck(){
// 사용자가 입력한 id값을 가지고 db서버에 이미 존재하는 id인지 확인하는 기능
// form 태그의 enroll-form(id값)을 기준으로 name값을 가져오도록 함
const $userId = $("#enroll-form input[name=userId]");
$.ajax({
url : "idCheck.me",
data : {
userId : $userId.val()
},
success : function(result){
if(result == 1){ // 이미 사용중
alert("이미 사용중인 아이디입니다.");
$userId.val("");
$userId.focus(); // userId로 포커스
}else{ // 사용안함
alert("사용해도 됩니다.");
}
}
})
}
</script>
<jsp:include page="/WEB-INF/views/common/footer.jsp"></jsp:include>
</body>
</html>
▶ MemberController.java
☞ 비동기방법으로 보낼때는 항상 문자열 데이터만 전달할 수 있다!!
☞ @ResponseBody
=> 이게 있어야지 순수한 값자체가 반환이 된다! (비동기 요청시 필요! 라이브러리 없이 사용한다면 필수로 추가해야함)
컨트롤러에서 반환되는 값은 forward 혹은 redirect를 위한 경로로 해석을 한다.
즉, 반환되는 문자열값은 "경로"로써 인식을 함.
그게아니라 "값 자체"를 반환시키기 위해서는 @ResponseBody어노테이션이 필요하다.
@ResponseBody // 이게 있어야지 순수한 값자체가 반환이 된다! (비동기 요청시 필요! 라이브러리 없이 사용한다면 필수로 추가해야함)
@GetMapping("/idCheck.me")
public String idCheck(String userId){
int result = mService.idCheck(userId); // 아이디가 존재한다면 1, 없다면 0
return result + ""; // 비동기방법으로 보낼때는 항상 문자열 데이터만 전달할 수 있다!!
}
▶ MemberService.java
int idCheck(String userId);
▶ MemberServiceImpl.java
@Override
public int idCheck(String userId) {
return memberDao.idCheck(userId);
}
▶ MemberDao.java
int idCheck(String userId);
▶ MemberDaoImpl.java
@Override
public int idCheck(String userId) {
return sqlSession.selectOne("memberMapper.idCheck", userId);
}
▶ member-mapper.xml
<select id="idCheck" parameterType="string" resultType="int">
SELECT COUNT(*)
FROM MEMBER
WHERE USER_ID = #{userId}
</select>
2. 회원 정보 조회
1) 회원정보 조회 첫번째 방법
▶ main.jsp
=> script안에 data는 json 객체로 보내진다!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<div class="content">
<div class="content-1">
<h3>회원 정보 조회</h3>
<p>아이디를 입력 받아 일치하는 회원 정보를 출력</p>
아이디 : <input type="text" id="in1">
<button id="select1">조회</button>
<div id="result1" style="height:150px"></div>
</div>
</div>
<script>
document.getElementById("select1").addEventListener("click", function(){
const in1 = document.getElementById('in1');
const result1 = document.getElementById('result1');
$.ajax({
url : 'selectOne',
data : {userId: in1.value},
type : 'POST',
success : function(result) { // json 객체로 보내줌
// result => {userId : ?? , userName : ??}
result1.innerHTML = "";
if(result.userId){
// 1) ul요소 생성
const ul = document.createElement("ul"); // <ul></ul>
// 2) li 요소 생성 * 2개
const li1 = document.createElement("li");
li1.innerText = "아이디 : " + result.userId;
const li2 = document.createElement("li");
li2. innerText = "이름 : " + result.userName;
// 3) ul에 li추가
ul.append(li1, li2);
// 4) ul을 div에 추가
result1.append(ul);
}
}
})
})
</script>
<jsp:include page="/WEB-INF/views/common/footer.jsp" />
</body>
</html>
▶ MemberController.java
@ResponseBody
@PostMapping("/selectOne")
public HashMap<String, Object> selectOne(String userId) {
Member m = mService.loginMember(userId);
// String userInfo;
HashMap<String, Object> map = new HashMap(); // HashMap이 Json Object로 반환이 되어야함
// res.setContextType("aplication/json; charset");
if(m != null) {
// userInfo = "{\"userId\":\""+m.getUserId()+"\",\"userName\":\""+m.getUserName()+"\"}";
map.put("userId", m.getUserId());
map.put("userName", m.getUserName());
}else {
// userInfo = "{\"userId\":\",\"userName\":\"\"}";
}
// return userInfo;
return map;
}
2) 회원정보 조회 2번째 방법
=> 메이븐 레파지토리로 가서 pom.xml에 추가
=> JSON으로 자동으로 변환시켜줌.(hashmap, vo 등)
=> jsonView를 사용하기 위한 의존성
=> pom.xml에 추가
▶ servlet-context.xml
=> 비동기 요청처리를 위해 jsonView bean 객체 등록함
<!-- 비동기 요청처리를 위한 jsonView bean객체 등록 -->
<beans:bean id="viewResolver" class="org.springframework.web.servlet.view.BeanNameViewResolver">
<!--
처리순서는 1순위로 처리되도록 하고, 올바른 bean객체를 찾지 못한경우 기본 InternalResourceViewResolver가 처리하게 한다.
-->
<beans:property name="order" value="1"></beans:property>
</beans:bean>
<beans:bean id="jsonView" class="net.sf.json.spring.web.servlet.view.JsonView">
<beans:property name="contentType" value="application/json;charset=UTF-8"></beans:property>
</beans:bean>
▶ MemberController.java
@PostMapping("selectOne")
public String selectOne(String userId, Model model) {
Member m = mService.loginMember(userId);
HashMap<String, Object> map = new HashMap(); // HashMap이 Json Object로 반환이 되어야함
if(m != null) {
map.put("userId", m.getUserId());
map.put("userName", m.getUserName());
}
model.addAttribute("userInfo", map);
return "jsonView"; // 이 내용을 jsonView가 처리하라라는 뜻
}
▶ main.jsp
=> ajax가 알아서 json문자열이었지만 parse함수를 호출하면서 javaScript 객체로 반환해줌
3) 회원정보 조회 3번째 방법
▶ MemberController.java 수정
@PostMapping("selectOne")
public ResponseEntity<Map<String, Object>> selectOne(String userId) {
Member m = mService.loginMember(userId);
HashMap<String, Object> map = new HashMap(); // HashMap이 Json Object로 반환이 되어야함
ResponseEntity res = null;
if(m != null) {
map.put("userId", m.getUserId());
map.put("userName", m.getUserName());
// 응답상태 성공 : 200, 실패하면 404 등 다양한데 그 상태 중 200을 의미 : ok
res = ResponseEntity.ok()
.header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_UTF8_VALUE)
.body(map);
}else {
res = ResponseEntity.notFound().build();
}
return res;
}
▶ main.jsp
'Server > Spring' 카테고리의 다른 글
| [Spring] 6-2. 게시판 검색기능 (0) | 2024.01.24 |
|---|---|
| [Spring] 6-1. 게시판 목록, 페이징 (0) | 2024.01.23 |
| [Spring] 4. 예외처리 (0) | 2024.01.23 |
| [Spring] 3. 마이페이지 수정하기, alertMsg 띄우기 (0) | 2024.01.23 |
| [Spring] 2-2. 회원가입 페이지, 비밀번호 암호화 저장 (0) | 2024.01.22 |
'Server/Spring' Related Articles
more
