[Spring Boot] AJAX (💫 여러 값 전달하고 받기)

yihyun·2024년 9월 19일

Spring Boot

목록 보기

17/33

AJAX 로 여러 값 전달하고 받기

이전 포스트에서 AJAX로 아이디 중복체크를 해보았다.
그렇다면 id 하나의 값이 아닌 다양한 값을 주고 받을 때에는 어떻게 해야하는지 살펴보자!

먼저 로그인 페이지에서 살펴볼 예정인데, 원래는 로그인 페이지를 ajax로 할 경우 보안에 문제가 있기 때문에 하지 않아야 한다! 는 점을 기억하고 아래 내용은 참고만 하도록 하자 😅

🔽 view (html / jaca script)

html

<body>
	<table>
		<tr>
			<th>ID</th>
			<td><input type = "text" name = "id"/></td>
		</tr>
		<tr>
			<th>PW</th>
			<td><input type = "password" name = "pw"/></td>
		</tr>
		<tr>
			<th colspan = "2">
				<button id="login">LOGIN</button>
				<a href = "join.go">회원가입</a>
			</th>
		</tr>
	</table>
</body>

java script

<script>
	$('#login').on('click', function(){
		var id = $('input[name="id"]').val();
		var pw = $('input[name="pw"]').val();
		
		$.ajax({
			type: 'post',
			url: 'login.ajax',
			data: {'id':id, 'pw':pw},
			dataType: 'JSON',
			success: function(data){
				if(data.login){
					alert(id + '님 반갑습니다.');
					location.href='list.go';
				}else{
					alert('아이디 또는 비밀번호를 확인해주세요.');
				}
			},error: function(e){
				console.log(e);
			}
		});
	});
</script>

id 가 login 인 버튼에 클릭 이벤트가 발생하면 function() 을 실행한다.
input[name=id|pw] 인 요소의 value를 가져와 변수에 담아준다.
서버에서 실행된 login 메서드의 값이 true 이면 list.go 메서드로 연결해주고, false 일 경우 알림을 보낸다.

🔽 controller

@PostMapping(value= "/login.ajax")
@ResponseBody
public Map<String, Object> login(String id, String pw, HttpSession session) {
		
	Map<String, Object> result = new HashMap<String, Object>();
	if(member_service.login(id, pw)) {
		result.put("login", true);
		session.setAttribute("loginId", id);
	}else {
		result.put("login", false);
	}
	return result;
}

post 형식으로 받기 때문에 @PostMapping 어노테이션 선언 (RequestMapping 를 써도 된다.)
ajax와 연결되기 때문에 @ResponseBody 어노테이션 선언
Map 형태로 받아야 하기 때문에 Map 객체를 선언하고 성공 여부에 따라 true / false 값을 넣어준다.

🔽 service / dto / mapper

service

public boolean login(String id, String pw) {
	boolean success = false;
	if(member_mapper.login(id,pw)>0){
		success = true;
	}
	return success;
}

dto

int login(String id, String pw);

mapper

<select id="login" resultType="int">
	SELECT COUNT(id) FROM member WHERE id = #{param1} AND pw = #{param2}
</select>

✨ ajax로 list 표현하기

이번에는 더 많은 값을 받는 코드를 살펴보자.
로그인에 성공할 경우 회원정보를 확인할 수 있는 list.jsp 로 이동하며, list.jsp 에는 회원의 이름, 나이, 성별, 이메일이 노출된다.

✅ view

html

<button onclick="location.href='insert.go'">입사자 등록</button>
<table>
	<thead>
		<tr>
			<th>ID</th> <th>이름</th> <th>나이</th> <th>이메일</th>
		</tr>
	</thead>
	<tbody id="list"></tbody>
</table>

java script

<script>
	$.ajax({
		type: 'GET',
		url: 'list.ajax',
		data: {}, // 보내는 파라미터가 없을 경우 빈 상태로 보낸다.
		dataTyle: 'JSON',
		success: function(data){
			console.log(data);
			if(data.login){
				drawList(data.list); 
			}else{
				alert('로그인이 필요한 서비스입니다.');
				location.href='./';
			}
		}, error: function(e){
			console.log(e);
		}
	});
	
	function drawList(list){
		var content = '';
		list.forEach(function(item,idx){
			content += '<tr>';
			content += '<td>'+item.id+'</td>';
			content += '<td>'+item.name+'</td>';
			content += '<td>'+item.age+'</td>';
			content += '<td>'+item.email+'</td>';
			content += '</tr>';
			console.log(item.id, item.age, item.name, item.email); 
		});
		$('#list').html(content);
	}
</script>

success 에서 login 여부에 따라 list를 보여주거나 or 로그인 페이지로 돌려보내준다.
→ session 체크는 서버에서 진행(controller)
forEach 를 사용해 데이터가 있을 때까지 계속해서 추가해준다.

✅ controller

@GetMapping(value="/list.go")
public String list() {
	return "list";
}
	
@GetMapping(value="/list.ajax")
@ResponseBody
public Map<String, Object> list(HttpSession session){
		
	Map<String, Object> map = new HashMap<String, Object>();
		
	if(session.getAttribute("loginId") != null) {
		map.put("login", true); 
		List<HashMap<String, Object>> list = member_service.list(); 
		map.put("list", list);
	}else {
		map.put("login", false);
	}
	return map;
}

get 형식으로 받기 때문에 @GetMapping 어노테이션 선언
ajax와 연결되기 때문에 @ResponseBody 어노테이션 선언
session 이 있을 경우 login 에 true 값을 넣어준다. (key : value)
List 로 받아온 값을 map 에 넣어준다
❌ java에서는 Object를 사용할 경우 casting을 해줘야 하지만 js 에서는 더블쿼터로만 구분하기 때문에 Object를 사용해주는게 편하다!

✅ service / dto / mapper

service

public List<HashMap<String, Object>> list() {
	return member_mapper.list();
}

dto

List<HashMap<String, Object>> list();

mapper

<select id="list" resultType="map">
	SELECT id, name, age, email FROM member
</select>

AJAX는 * 로 데이터를 넘길 경우 모든 데이터를 다 보여주게 되기 때문에 보여줄 컬럼만 지정해줘야 한다.

yihyun

개발자가 되어보자

이전 포스트

[Spring Boot] AJAX (✅ 아이디 중복 체크)

다음 포스트