AJAX] 로그인

 

 

1. 프로젝트 생성, 기본 설정 스프링과 같음
- project pacets , pom.xml  버전
- web.xml 인코딩
- server path

2. pom.xml 에 AJAX 통신을 위한 라이브러리 추가

메이븐 리포지터리

Maven Repository: Search/Browse/Explore

 

jackson 이라고 검색하면 

이 두개를 pom.xml 에 넣어준다.

버전은 둘 다 2.11.0 으로 했음!

 

오늘은 비동기 방식의 데이터 전송을 보기 위해 간단한 코드 작성 하고
log를 찍어 데이터 값이 어떻게 들어오는지 확인해본다.

 

home.jsp

- 동기방식
form 태그에서 action 속성과 method를 통해 전달

	<h3>동기방식</h3>
	<form action="login.do" method="post">
		<table>
			<tr>
				<th>ID</th>
				<td><input type="text" name="id" value=""/></td>
			</tr>
			<tr>
				<th>PW</th>
				<td><input type="password" name="pw" value=""/></td>
			</tr>
			<tr>
				<th colspan="2">
					<button>로그인</button>
				</th>
			</tr>
		</table>
	</form>

 

- 비동기 방식
form 태그가 아닌 jquery를 이용해서 전송해준다.

	<h3>비동기방식</h3>
		<table>
			<tr>
				<th>ID</th>
				<td><input type="text" id="id" value=""/></td>
			</tr>
			<tr>
				<th>PW</th>
				<td><input type="password" id="pw" value=""/></td>
			</tr>
			<tr>
				<th colspan="2">
					<button onclick="send()">LOG IN</button>
				</th>
			</tr>
		</table>

button onclick 속성을 send() 함수로 보내주고

<script>에서 jQuery로 send() 함수 작성

<script>
function send() {
	console.log("ajax 전송");
	
	$.ajax({
		type:"post", // method = "post" 와 같다.
		url : "login.ajax", // action과 같다.
		data: {
			id: $("#id").val(),
			pw: $("#pw").val()
		}, //parameter , 복수 개로 받기 위해 object 사용
		dataType:"json",  //어떤 형태로 데이터를 주고 받나?
		success:function(data){
			console.log(data);
		}, // 성공했을 때 실행할 것. 익명객체 function!
		error:function(e){
			console.log(e);
		} // 실패했다면 실행할 것.
		
	});
}
</script>

버튼을 누르면 send() 함수 실행

•   console.log("ajax 전송");  // 웹페이지 콘솔창에 메시지를 출력해준다.
• $.ajax({ });  // ajax 작성 기본 구조
• type : "post/get",  // form태그의 method = "post/get" 과 같다. 
• url : "login.ajax",   // form 태그의 action = "login.do" 와 같다.
• data : { key : value },  // parameter를 object 형태로 받아온다.
  // data : { kdy : value } 안에 여러 개의 parameter를 받기 위해 object를 사용
• id : $('#id').val(), pw: $('#pw').val()   // 위에 table에서 id=id , id=pw 라고 지정해주었기 때문에 #id, #pw로 불러오며, 
  // .val()을 통해서 value 값만 가져온다.
• dataType: "json",  // json 형태로 데이터를 주고 받는다. 지정하지 않으면 자동 추측
• success : function(data) { }, // 성공했을 때 실행할 것. function은 익명객체(????)
• error : function(e) { }  // 실패했을 때 실행할 것.

 

HomeController.java

	@RequestMapping(value = "/login.do")
	public String formLogin(@RequestParam String id, @RequestParam String pw) {
		logger.info("동기방식 : {} / {}",id,pw);
		return "home";
	}
	
	// controller 도 비동기에 맞게 변경해줘야 함.
	//1. response 객체를 이용해 응답해 줘야 함
	//2. javascript가 알 수 있는 형태로 응답해줘야 한다. (array, object)
	//위 내용을 쉽게 할 수 있도록 라이브러리가 존재한다.
	@RequestMapping(value = "/login.ajax")
	@ResponseBody //response를 이용해서 값을 전달할 수 있다.
	public HashMap<String, Object> ajaxLogin(@RequestParam String id, @RequestParam String pw) {
		logger.info("비동기방식 : {} / {}",id,pw);
		
		//{"msg":"로그인에 성공했습니다."} <- js object / HashMap
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("msg", "로그인에 성공 했습니다.");
		map.put("success", true);
		map.put("code", 200); 
		
		return map;
	}

위는 동기방식

아래는 비동기 방식

• 동기 방식은 request를 이용해서 데이터 값을 전달하고
• 비동기 방식은 response를 이용해서 페이지에 적는다 (???)
• @ResponseBody   // response를 이용해서 값을 전달한다.
• public HashMap<String, Object> ajaxLogin(@RequestParam String id, @RequestParam String pw) { } 
  // ajaxLogin 이란 이름의 메서드는 HahMap 데이터 타입을 반환(return)받고, String 타입 parameter 인 id, pw를 받아온다.
• {"msg":"로그인에 성공했습니다."} 는 js의 object 형태 이다. 이를 받아오려면 HashMap을 사용해줘야하므로 
• HashMap<String, Object> map = new HashMap<String, Object>();  //HashMap을 객체화해줌
• map.put("msg", "로그인에 성공 했습니다.");
  map.put("success", true);
  map.put("code", 200);         // map 에 objec 형태의 데이터를 넣어준다.
• return map;                         // map을 반환

 

비동기방식 버튼 누르면 나오는 콘솔 창