소스 파일명 : json_ajax.js
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
// (2018.4.21, 차재복, Cha Jae Bok, cjbword@gmailcom)

// 의사랜덤수 배열 발생 (1~100)
function randGen() {
	var arr = [];
	for (var i = 0; i < 100; i++) {
		arr[i] = Math.floor((Math.random() * 100) + 1);
		// random() : 0 (inclusive) and 1 (exclusive)
	}
	return arr;
}


// 샘플데이터(의사랜덤)의 화면 출력 및 전역변수 선언
function dispData() {
	sampleData = randGen(); // 샘플데이터 발생 및 전역변수 선언
	var	dispData = '',
		dispWin = document.getElementById('preview_div');
	for (var i = 0; i < sampleData.length; i++) {
		dispData += sampleData[i] + ' ';
		if (i % 10 == 9) dispData += '<br>';
	}
	dispWin.innerHTML = dispData;
}


// jQuery에 의한 ajax 호출 => JSON 형식의 데이터를 서버에 전달 => 서버로부터 전달받은 데이터를 다시 화면에 출력
$( function () {
	$(document).on("click", "#json", 
		function(event){
				// 송신 데이터를 json 형식의 문자열로 변환
				var sendJsonString = JSON.stringify(sampleData); 
				var	dispData = '';
				$.ajax ({
					url  : 'json_ajax.php',			// 송신 목적지 url
					type : 'POST',					// 송신 시 http 메소드
					contentType:'application/json', // 송신 시 컨텐츠 타입
					data : sendJsonString,

					dataType:'json',				// 수신 받을 데이터 타입 
					success : function( recvJsonObj ){	// recvJsonObj => 수신된 json 형식의 데이터를 객체 형태로 인식함
						// 수신된 객체 요소 하나씩 처리하여 출력 준비
						for (var i = 0; i < Object.keys(recvJsonObj).length; i++) {
							dispData += recvJsonObj[i] + ' ';
							if (i % 10 == 9) dispData += '<br>';
						}
						// 화면 출력
						$('#result_div').html('<br>웹서버로부터 다시 수신 받은 json 데이터 : <br><br>' + dispData);
					},

					error : function(request, status, error ) {
						console.log ("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
					}
				});
		}
	);
});