11. (ajax/에이젝스) post query parameter 쿼리 파람 방식 array 배열 데이터 전송 방법

---

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : ajax

---

[소스 코드]

​

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 
    	2. post 쿼리 파람 방식으로는 [url에 바로 붙여서 전송 방법], [data 쪽에 삽입 후 전송 방법] 등이 있습니다
    	3. 전송 형태 : http://localhost:7000/selectMultiWhere?name=김&deptList=[고구려, 백제, 신라]
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");

    		// [이벤트 함수 호출]
    		requestPost();
    	};



    	/* [이벤트 함수 정의] */
    	function requestPost(){
    		console.log("");
    		console.log("[requestPost] : [start]");    		
    		console.log("");

    		// [전송할 배열 데이터 정의 실시]
    		var reqArray = new Array();
    		reqArray.push("고구려");
    		reqArray.push("백제");
    		reqArray.push("신라");


    		// [요청 url 및 데이터 정의 실시]
    		var reqURL = "http://localhost:7000/selectMultiWhere?";    		
    		reqURL += $.param (
    			{
    				"name" : "김", 
    				//"deptList" : JSON.stringify(reqArray).replace(/"/gim, "") // 쌍따옴표 제거하면서 전송
    				"deptList" : JSON.stringify(reqArray) // 배열형태 그대로 전송
    			}
    		); 		
    		
    		console.log("");
    		console.log("[requestPost] : [request url] : " + reqURL);
    		console.log("[requestPost] : [request array] : " + JSON.stringify(reqArray));    		    		
    		console.log("[requestPost] :  [request method] : " + "POST QUERY PARAM");
    		console.log("");
    		
    		$.ajax({
    			// [요청 시작 부분]    			
    			url: reqURL, //주소    			
    			/* data: jQuery.param({ // 쿼리 파람 지정 [데이터 삽입 방식]
    				"name" : "김",
    				//"deptList" : JSON.stringify(reqArray).replace(/"/gim, "") // 쌍따옴표 제거하면서 전송
    				"deptList" : JSON.stringify(reqArray) // 배열형태 그대로 전송
    			}), */
    			type: "POST", //전송 타입
    			async: true, //비동기 여부
    			timeout: 5000, //타임 아웃 설정
    			dataType: "TEXT", //응답받을 데이터 타입 (XML,JSON,TEXT,HTML)    			
    			contentType: "application/x-www-form-urlencoded; charset=utf-8", //헤더의 Content-Type을 설정
    			    			
    			// [응답 확인 부분]
    			success: function(response) {
    				console.log("");
    				console.log("[requestPost] : [response] : " + response);
    				console.log("");    				
    			},
    			    			
    			// [에러 확인 부분]
    			error: function(xhr) {
    				console.log("");
    				console.log("[requestPost] : [error] : " + xhr);
    				console.log("");    				
    			},
    			    			
    			// [완료 확인 부분]
    			complete:function(data,textStatus) {
    				console.log("");
    				console.log("[requestPost] : [complete] : " + textStatus);
    				console.log("");    				
    			}
    		});
									
    	};	
    	
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. post 쿼리 파람 방식으로는 [url에 바로 붙여서 전송 방법], [data 쪽에 삽입 후 전송 방법] 등이 있습니다

3. 전송 형태 : http://localhost:7000/selectMultiWhere?name=김&deptList=[고구려, 백제, 신라]

*/

---