[Spring Boot] AJAX (🌈 복잡한 형태의 데이터 전송하기)

AJAX 로 복잡한 형태 전송하기

AJAX는 JSON 형태로 값을 전송한다.

JSON 형태는 기본 key : value 형태로 전송되지만 Objcet 에는 모든 값이 들어갈 수 있기 때문에 value에 배열, 배열안에 오브젝트, 그 안에 배열 등등.. 굉장히 복잡한 형태의 데이터가 담기는 경우도 있다.

이렇게 복잡한 형태로 데이터가 담겨있을 경우 기존에 사용하던 방식이 아닌 별도의 방법이 필요한데 아래에 코드를 통해 살펴보고자 한다.

별도로 작성된 html 문서를 insert.jsp 에 보여주는 형태로 진행!!

---

📌 jquery 로 다른 페이지 불러오기

jquery 로 다른 페이지를 해당 페이지에 불러올 수 있는데 방법은 다음과 같다.

$('표현할 위치').load(불러올페이지경로 셀렉터, [콜백함수]);
❌ views 폴더에 있는 경우 controller 에서만 불러올 수 있기 때문에 static에 html 폴더를 추가해 html 문서를 작성해준다.

---

이제 html 문서를 별도로 작성해보자

<div id="career_card">
	<table>
		<tr>
			<th>이름</th>
			<td><input type="text" name="name" value=""/></td>
			<th>성별</th>
			<td>
				<input type="radio" name="gender" value="남"/>남
				&nbsp;&nbsp;
				<input type="radio" name="gender" value="여"/>여				
			</td>
			<th rowspan="2">
				<input type="button" class="row2" value="등록" onclick="regiest()"/>
			</th>
		</tr>
		<tr>
			<th>생년월일</th>
			<td><input type="date" name="birth_date" value=""/></td>
			<th>입사일</th>
			<td><input type="date" name="hire_date" value=""/></td>
		</tr>
	</table>
	
	<div class="career">경력 사항</div>
	<div>
		<ul class="career">
			<li>
				<input type="text" name="co_name" placeholder="회사명"/>
				<input type="date" name="start_date"/>
				<input type="date" name="end_date"/>
				<input type="text" name="desc" placeholder="업무내용"/>
				<button onclick="addList(this)">추가</button> 
			</li>
		</ul>
	</div>
</div>

• 위 html 문서를 살펴보면 개인의 기본정보와 그 사람의 커리어 정보를 입력할 수 있도록 작성되어 있다.

• ❓ 그렇다면 해당 테이터들을 불러오기 위해선 어떻게 해야할까?

• ❓ 추가 버튼을 누르면 경력 사항을 추가 입력할 수 있도록 하기 위해선 어떻게 해야할까? (경력은 n개가 있을 수 있기 때문에)

✨ 페이지 불러오기 + 부모요소를 찾아 추가하기

<script>
	$('body').load('html/card.html #career_card', function(res,stat){
		console.log(res); 
		console.log(stat); 
	});

	function addList(elem){ 
		var html = $(elem).parent().html(); // elem=this=button 의 한단계 위에 있는 html을 가져온다
		console.log(html);
		$('ul.career').append('<li>'+html+'</li>');
	}
</script>

• .load() 를 사용해 다른 페이지에 있는 내용을 가져온다.
• 추가 버튼을 누를 경우 <li> 요소들만 추가해주기 위해서 elem = button 의 부모인 li 의 html을 가져와 .append() 해준다.
  → <li> 에 html 내용만 가져왔기 때문에 앞 뒤에 <li></li>를 추가로 붙여서 append 해준다.

이렇게 데이터를 끌어와 가져왔다면, 이제 입력한 데이터를 서버에 전송해 DB에 입력해주어야 한다.

⏰ 복잡한 데이터 전송하기

현재 등록 버튼을 클릭해 onclick 이벤트가 발생할 경우 regiest() 함수가 실행된다.

이벤트가 발생하면 데이터를 담아와 서버에 전송해줘야 하는데 전송할 데이터는

• 간단한 데이터 : 이름, 성별, 생년월일, 입사일
• 복잡한 데이터 : 경력사항 (1개~n개가 있을 수 있어 배열로 담아야 한다)

복잡한 데이터를 전송할 때에는 조금 더 신경써줘야 하는 부분들이 있는데 아래 코드를 보며 하나씩 살펴보자!

🔽 view (js)

<script>
	function resiest(){
  		// ▼ 기본정보 가져오기
		var name = $('input[name=name]').val();
		var gender = $('input[name=gender]:checked').val();
		var birth_date = $('input[name=birth_date]').val();
		var hire_date = $('input[name=hire_date]').val();
  
  		// ▼ 경력사항 가져오기
  		var list = []; // 배열 생성
  		
  		// 2중 for 문을 사용해 0번 인덱스에 하나의 경력이 담기도록 진행
  		$('ul.career li').each(function(item, idx){
        	var career = {}; // Object 생성
            $(item).find('input').each(function(elem, idx){
            	// input 요소의 name을 key로 value를 값으로 넣는다 (Object 형태)
            	career[$(elem).attr('name')] = $(elem).val();
            });
	        list.push(career);
        });
  
        // 서버로 전송할 파라미터 (Object)
        var param = {};
        param.name = name;
        param.gender = gender;
        param.birth_date = birth_date;
        param.hire_date = hire_date;
        param.list = list;
        console.log('서버에 전송할 데이터 : ' , param);

        // AJAX
        $.ajax({
            type: 'POST',
            url: 'insert.ajax',
            data: JSON.stringify(param),
            dataType: 'JSON',
            contentType: 'application/json; charset=UTF-8',
            success: function(data){
                console.log(data);
            },error: function(e){
                console.log(e);
            }
        });
	}
</script>

✔ 기본정보 가져오기

• 변수에 셀렉터($)로 요소를 불러와 .val() 로 요소에 value를 담아준다.

✔ 경력사항 가져오기

• n개가 담길 수 있기 때문에 배열을 준비한다.
• 셀렉터($)로 class가 career인 ul 태그의 자식 요소인 li 요소를 가져온다.
• 배열 인덱스 안에 담길 정보(경력사항)를 담기 위해 오브젝트를 준비한다.
• 2중 for문을 사용해 하나의 인덱스에 경력사항에 대한 정보를 담아준다.
• 경력사항은 input 태그의 name을 오브젝트의 key로 value를 값으로 넣어준다.
• 2번째 for문이 끝나면 (인덱스 하나에 값이 들어갔으면) .push(career) 로 배열에 오브젝트를 담아준다.

✔ 서버로 전송할 파라미터

• 오브젝트를 생성하고, value에 앞에서 넣어준 변수(입력 받은 데이터)를 넣어준다.
  param.name = name; : 오브젝트.key = value;
• ❌ Object를 console로 출력할 때에는 +가 아닌 ,로 해줘야 한다!

✔ AJAX (복잡한 데이터를 보낼 때 규칙!!)

• 1) 복잡한 데이터를 전송할 때에는 POST 방식으로 전송해야 한다.
  → GET 방식은 내용이 많을 경우 데이터가 끊길 수 있다.
• 2) 보내는 파라미터는 json 형태의 문자열 이어야 한다.
  → JSON.stringify() 로 문자열로 변환해준다.
  ※ 텍스트를 JSON으로 바꾸기 : JSON.parse()
• 3) contentType 이 json 이라고 명시해 줘야한다.
  → application/json;
  ▶ 한글이 있을 경우 charset=UTF-8 깨짐 방지를 위해 같이 사용해줘야 한다.

🔽 controller (서버)

@PostMapping(value="/insert.ajax")
@ResponseBody
public Map<String, Object> insert(@RequestBody Map<String, Object> param){
	String name = (String) param.get("name");
	String gender = (String) param.get("gender");
	String birth_date = (String) param.get("birth_date");
	String hire_date = (String) param.get("hire_date");
    logger.info("name : {}, gender : {}, birth_date : {}, hire_date : {}", name,gender,birth_date,hire_date);
        
    List<Map<String, String>> list = (List<Map<String, String>>) param.get("list");
    
    // view에 데이터가 전달되는지 확인하기 위해 사용
    Map<String, Object> result = new HashMap<String, Object>();
	result.put("success", true);
        
    return result;

}

❌ AJAX로 전달한 이름과 서버에서 파라미터로 받는 이름은 정확하게 동일해야 한다!
※ logger 로 여러 데이터를 볼 수 있다.

• 복잡한 형태로 받을 때 파라미터는 @RequestBody 로 받아줘야 한다.
• 기본 정보는 String 로 받아준다.
• 경력 사항(=복잡한 정보) 는 List에 Map 형태로 받아준다.
• view 에서 success 에 true가 나오면 서로 연결이 잘 된것이다.