jQuery(ajax)의 xmpRequest로 API 전용 컨트롤러에게 요청하여 jSon 객체값 응답받기
1) 결과값을 담을 Json 클래스 만들기 (JsonResult.java)
public class JsonResult {
private String result; //success or fail
private Object data; // if result = success data else null
// success 일때 data의 타입을 모르기때문에 Object로 선언
private String message; // if result = success null else error message
private JsonResult() {
}
//에러일때 생성자
private JsonResult(String message) {
this.result = "fail";
this.message = message;
}
//성공일때 생성자
private JsonResult(Object data) {
this.result = "success";
this.data = data;
}
//실패일때 메세지값 전달하는 static 메서드
public static JsonResult fail(String message) {
return new JsonResult(message);
}
//성공일때 해당 데이터 전달하는 static 메서드
public static JsonResult success(Object data) {
return new JsonResult(data);
}
public String getResult() {
return result;
}
public Object getData() {
return data;
}
public String getMessage() {
return message;
}
2) jQuery(ajax)의 xmlRequest를 사용해서 서버(컨트롤러)에 url을 요청한다.
* ajax는 비동기식 자바스크립트와 xml의 약자이다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한
데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
즉, 자바스크립트를 통해서 서버에 데이터를 요청하는 기술
[ join.jsp ]
<script>
$(function(){ // DOM이 모두 로딩 되고 이 함수가 실행된다. 따라서 btnCheck.length 가 1이 나온다.($function() 밖에서 length값을 구해보면 0이 나온다.)
//input-email DOM 영역을 벗어난 경우 발생하는 함수
//참고, id값인 경우 # 을 붙여준다. 앞에 $를 붙여주는 것은 jQuery 관례상 붙여준다.
$("#input-email").change(function(){
$('#img-check').hide();
$('#btn-check').show()
});
//"중복확인" 버튼을 클릭한 경우 발생하는 함수
$("#btn-check").click(function(){
const email = $("#input-email").val();
if(email == ''){
return;
}
//ajax를 이용해서 xmlRequest로 API를 담당하는 컨트롤러에 중복이메일 검사 요청을 한다.
$.ajax({
url: "http://localhost:8080/mysite03/api/user/existemail?email="+email, //데이터를 전송할 url
async: true, //동기, 비동기
data: '' , //서버에 전송할 데이터(key/value 형식의 객체)
dataType: 'json', //서버가 리턴하는 데이터 타입(xml, json, script, html)
success: function(response){ //ajax통신이 성공했을때 처리내용
//xmlRequest 로 요청했을때 결과값을 response로 응답받음
//결과값예시. {"result": "success","data": false,"message": null}
if(response.result != 'success'){ //요청에 대한 결과가 success 가 아닌 경우
console.error(response.message);
return;
}
if(response.data == true){ //data에는 이메일이 중복인 경우 true, 중복이 아닌 경우
// false 값이 들어 있다.
alert('이미 존재하는 이메일 입니다. 다른 이메일을 사용해주세요.')
$('#input-email').val('').focus();
//input-email DOM을 값 초기화하고 커서를 포커스한다.
return;
}
//여기까지 내려왔으면 중복된 이메일이 없는 경우인 것
//중복확인 이미지를 없애고 img-check를 대체한다.
$('#img-check').show();
$('#btn-check').hide();
},
error: function(xhr, status, e){ //ajax 통신 에러 발생시 처리할 내용
console.error(status + ": " + e);
}
});
});
})
</script>
3) API 를 주로 처리하는 UserController.java 생성
4)생성 후 join.jsp의 요청 url을 받을 컨트롤러(메소드) 생성
=> 해당 컨트롤러는 요청 url에 parameter에 있는 email 값을 DB에 조회한 후 중복된 값의 여부를
Boolean 타입으로 리턴 받는다.
=> 중복 여부의 값을 result 변수에 담고 JsonResult 객체에 넣어주어 JSon 형식으로 리턴한다.
[ UserController.java ]
@Controller("userApiController") //디폴트 이름 중복으로 인해서 컨트롤러 명 선언
//@RestController("userApiController") //컨트롤러인데 API 전용 컨트롤러 라는 설정 => Controller(메서드에) @ResponseBody를 붙이지 않아도 된다.
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
//join.jsp 에서 ajax로 요청받은 url(/existemail)을 처리하는 컨트롤러
@ResponseBody // View 페이지를 리턴하는 것이 아닌 Json객체를 리턴해야하기 때문에 @ResponseBody를
// 붙여준다.
@RequestMapping("/existemail")
public JsonResult existEmail(String email){
Boolean result = userService.existUser(email);
return JsonResult.success(result);
}
}
[ UserService.java ]
public Boolean existUser(String email) {
UserVo userVo = userRepository.findByEmail(email);
//검색한 email 로 userVo가 없으면 ture, 있으면 false
return userVo != null;
}
[UserRepositorty.java]
public UserVo findByEmail(String email) {
return sqlSession.selectOne("user.findByEmail", email);
}
[user.xml] : MyBatis로 실행할 SQL문이 작성되어있는 파일
<select id="findByEmail" parameterType="String" resultType="uservo">
<![CDATA[
select no, name
from user
where email = #{email }
]]>
</select>
5) join.jsp에서는 리턴받은 Json 객체값의 data를 확인하여 중복여부에 따른 결과를 처리하면 된다.
'비트교육센터[전문가반]' 카테고리의 다른 글
| Paging 처리 [Spring] (0) | 2021.05.04 |
|---|---|
| Spring MVC [비트교육센터] _ 복습04 _ Security (Interceptor + Annotation) (0) | 2021.04.24 |
| Spring MVC [비트교육센터] _ 복습03 (0) | 2021.04.22 |
| Spring MVC [비트교육센터] _ 복습02 (0) | 2021.04.21 |
| Spring MVC [비트교육센터] _ 복습01 (0) | 2021.04.21 |
