SPRING (08.28) - Ajax 기초

더하기 v1

<form name="form1" method="POST" action="./doPlus">
		<div>
			<input type="text" name="num1" placeholder="정수 1 입력" />
		</div>
		<div>
			<input type="text" name="num2" placeholder="정수 2 입력" />
		</div>
		<input type="submit" value="더하기 v1" />
</form>

• /user/home/plus로 들어가게 되면 controller에서 return으로 jsp의 form이 보이고, 숫자 입력하면 action을 doPlus로 했기에 다시 controller의 설정한 더하기를 하고 그 결과값을 return 새로운 페이지에서 그 값을 보게 된다.

 

더하기 v2

function callByAjax() {
		let form = document.form1;
		let num1 = form.num1.value;
		let num2 = form.num2.value;
		let action = form.action;
		$.get(action, {
			num1 : num1,
			num2 : num2
		}, function(data) {
			$('.rs').text(data);
		}, 'html');
	}
    
    .
    .
    .
// form 태그 안    
<input onclick="callByAjax();" type="button" value="더하기 v2" />

• document.form1은 HTML 문서에서 name이 form1인 폼 요소를 가리킨다.
• let num1, num2의 form.num1,2는 폼 내에서 name이 num1인 입력 필드를 가리키고, .value는 입력 필드의 현재 값을 가져와서 변수에 저장
• form.action은 <form name="form1" method="POST" action="./doPlus"> form 태그의 action을 가리킴
• JavaScript 함수 callByAjax는 jQuery의 $.get() 메소드를 사용하여 Ajax 요청 수행

1. Ajax GET 요청을 보냄
2. action -> 요청을 보낼 url
3. 서버에 전송할 데이터를 지정한다.
4. 서버에서 응답 데이터를 매개변수 data로 받는다.
5. 클래스가 rs인 요소를 찾아서 텍스트를 서버로부터 받은 응답 데이터로 바꾼다.
6. html -> 서버로부터 받을 데이터의 형식을 지정한다!

더하기 v3

function callByAjaxV2() {
		let form = document.form1;
		let num1 = form.num1.value;
		let num2 = form.num2.value;
		let action = form.action;
		$.get(action, {
			num1 : num1,
			num2 : num2
		}, function(data) {
			data = data.split('/');
			let rs = data[0];
			let msg = data[1];
			$('.rs').text(rs);
			$('.rs-msg').text(msg);
		}, 'html');
	}

• v3는 v2와 비교해서 서버로부터 받은 데이터를 '/' 문자로 분리하여 두 개의 각각 다른 html 요소에 표시

더하기 v4

	function callByAjaxV3() {
		let form = document.form1;
		let num1 = form.num1.value;
		let num2 = form.num2.value;
		let action = form.action;
		$.get(action, {
			num1 : num1,
			num2 : num2
		}, function(data) {
			data = data.split('/');
			let rs = data[0];
			let msg = data[1];
			let code = data[2];
			$('.rs').text(rs);
			$('.rs-msg').text(msg);
			$('.rs-code').text(code);
		}, 'html');
	}

더하기 v5

	function callByAjaxV4() {
		let form = document.form1;
		let num1 = form.num1.value;
		let num2 = form.num2.value;
		$.get('./doPlusJson', {
			num1 : num1,
			num2 : num2
		}, function(data) {
			$('.rs').text(data.rs);
			$('.rs-msg').text(data.msg);
			$('.rs-code').text(data.code);
		}, 'json');
	}

• url이 ./doPlusJson으로 경로 요청, 서버로부터 받은 JSON 데이터를 이용하여 각 키 (rs, msg, code)의 값을 클래스가 rs, rs-msg, rs-code인 html 요소에 표시