AJAX 비동기 통신으로 데이터 통신

AJAX(Asynchronous JavaScript +XML)는 JavaScript를 사용한 비동기 통신으로 서버/클라이언트간에 데이터를 주고받는 기술이다.

배열 또는 JSON 형식의 응답을 받는 것도 가능하다.

일반적인 AJAX 사용법

문서 내에 폼(FORM)이 존재하고 폼에 속한 모든 요소들을 전송 - serialize();

폼에 존재하지 않는 요소는 각각 파라미터와 값을 지정하여 전송.

function orderWithSave() {
	var m_id = $("#m_id").val();
	var data = $("#form_cart").serialize();
	
	$.ajax({
		type: "POST",
		url: "ajax/cart/saveCart_order.php",
		data: data + "&m_id=" + m_id,
		success: function(rtn) {
			if(rtn == "ok") {
				alert("주문 완료.");
				
				location.reload(true);
			} else {
				alert("주문 실패.");
			}
		}
	});
}

값을 받아 응답하는 페이지 (saveCart_order.php) 에서 모든 처리가 정상적으로 수행되면 문자열 'ok' 를,

오류가 발생한 경우 이 외의 값을 출력하고 리턴 받은 값에 따라 처리한다.

AJAX - 배열로 응답 받는 방법

위와는 다르게 dataType을 json으로 지정하면 배열 변수를 리턴 받을 수 있다.

리턴 받은 변수에 대해 별도의 decode 과정은 필요 없다.

function saveCart() {
	var m_id = $("#m_id").val();
	var data = $("#form_cart").serialize();
	
	$.ajax({
		type: "POST",
		url: "ajax/cart/saveCart.php",
		data: data + "&m_id=" + m_id,
		dataType: "json",
		success: function(rtn) {
			$("#cartInfo_DRY").html(number_format(rtn[0]));
			$("#cartInfo_WET").html(number_format(rtn[1]));
			$("#cartInfo_PRICE").html(number_format(rtn[2]));
			$("#cartInfo_EA").html(rtn[3]);
			$("#cartInfo_EA_Ban").html(rtn[3]);
			
			alert("저장 되었습니다.");
		}
	});
}

값을 받아 응답하는 페이지 (saveCart.php) 에서는 encode를 해 줘야 한다.

...(생략)...
echo json_encode($arr);