86. (javascript/자바스크립트) location href 사용해 특정 페이지 접속 시 url 데이터 전송 및 url 데이터 확인 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

  <!-- 접속 요청 및 데이터를 보내는 페이지 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. location.href : 특정 링크로 페이지를 이동할 때 사용합니다
    	3. 참고 : get 방식, 쿼리 파람 형태로 데이터를 전송합니다     	
    	*/


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



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


    		// [인텐트 이동할 페이지 및 데이터 선언 실시]
    		var url = "../WebProject/a_test_default.html?";
    		var data = "idx=1&name=twok";

    		console.log("");
    		console.log("[intentDefaultPage] : [url] : " + url); 
    		console.log("[intentDefaultPage] : [data] : " + data); 
    		console.log("");


    		// [location 사용해 인텐트 이동 실시]
    		location.href = url + data; // 새로운 페이지로 이동 (뒤로가기 페이지 가능) 
    	};
    	
    </script>







    <!-- 접속 완료 및 데이터 받는 쪽 페이지 -->
    <script>

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

    		// [location url 정보 출력]
    		var url = location.href; 
    		console.log("");
    		console.log("[a_test_two] : [window onload] : [url] : " + url);
    		console.log("");
            
    		// [파라미터 파싱 실시]
    		var idx = url.indexOf("?");
    		if(idx >= 0){ //파라미터가 존재하는 경우
    			idx = idx + 1;
    			var data = url.substring(idx, url.length);
    			console.log("");
    			console.log("[a_test_two] : [window onload] : [Data] : " + data);
    			console.log("");

    			//반복문을 수행하면서 & 연속 데이터가 포함된지 확인
    			var count = 0;
    			for(var i=0; i<data.length; i++){
    				if(data[i] == "&"){
    					count ++; //카운트 증가
    				}
    			}

    			//파라미터 저장된 개수 확인
    			var data_Array = [];
    			for(var k=0; k<=count; k++){
    				data_Array.push(data.split("&")[k]);
    			}


    			//key 배열 data 배열 선언 및 데이터 삽입 실시
    			var key_Array = [];
    			var value_Array = [];

    			for(var j=0; j<data_Array.length; j++){
    				var str_data = data_Array[j];    				
    				key_Array.push(str_data.split("=")[0]);
    				value_Array.push(str_data.split("=")[1]);    				
    			}
    			console.log("");
    			console.log("[a_test_two] : [window onload] : [data_Array] : " + data_Array);    			
    			console.log("[a_test_two] : [window onload] : [key] : " + key_Array);
    			console.log("[a_test_two] : [window onload] : [value] : " + value_Array);
    			console.log("");
    		}    		    		
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. sweetalert : 브라우저에서 커스텀 다이얼로그 팝업창을 사용할 수 있습니다

3. 공식 사이트 : https://sweetalert.js.org/guides/

*/

/* =========================== */