window.location.href를 이용한 Query String get(),set()

window.location.href 를 조작 하여 request를 보내야 할때가 있다.

아무리 초기 기능과 로직 설계를 잘해도 요청 자의 요구 사항에 따라 불가피 하게 별도로 기능과 로직을 붙여야 하는경우...

아무튼 window.location.href를 지지고 볶아 해결 하였다.

    $(document).on('change', '.js_productViewNumSelectBox', function(e) {//selectbox가 변경될때
    	var urlpullpath = new URL(window.location.href);//현재 url전체를 가져온다. 파라메터 포함.
    	var urlpath = window.location.pathname;//현재url전체에서 파라메터만 빼고 컨택스트 경로만 가져온다.
    	var urlParams = urlpullpath.searchParams;//현재 url전체에서 파라메터들만 가져온다.
    	console.log("location:"+urlpath);
    	console.log($(this).val());//scale
    	urlParams.set("scale",$(this).val());//위에서 가져온 파라메터들 중 scale의 값을 업데이트 한다.
    	//현재 활성된 보기 옵션 가져와 설정.
     	var viewOption = "";
     	$('.js_viewOption').each(function (e) {//클래스명 js_viewOption 이 있는것들중 활성화된 놈의 value 값을 가져온다.
     		console.log($(this).hasClass('active'));
     		if($(this).hasClass('active')){
     			console.log($(this).data('type'));
     			viewOption = $(this).data('type');
     		}
     	});
        /*파라메터중 특정 값만 뽑아 낼때는 var tempStr = urlParams.get("viewOption") */
    	urlParams.set("viewOption",viewOption);//위에서 가져온 파라메터들 중 viewOption의 값을 업데이트 한다.

    	//위에서 지지고 볶아 정리한 url path와 파라메터를 조합해 요청한다.
        //ctx (context path)의 경우 was가 구성된 환경에 따라 붙이지 않아도된다.
        location.href= ctx + urlpath + "?"+urlParams;
    });