POST 형식으로 페이지 이동 - J쿼리(JQurey)

자바스크립트로 페이지를 이동시킬경우
location.href 로는 get 형식으로 인수를 전달한다.

그러나 인수의 값이 길거나 또는 인수값을 주소표시줄에 노출시키고 싶지 않은 경우 등등은
POST 형식으로 페이지를 이동시켜야 한다.

자바스크립트로 POST 형식으로 페이지를 이동시키려면
다음의 과정을 실행해야 한다.

1. <form>오브젝트를 구성요소를 포함하여 만든다.
   1. action: 이동할 페이지 URL
   2. method: get/post 여기서는 POST를 지정한다.
   3. target: 현재창에서 할지 새창으로 열지 등등...
2. 전달할 인수들을 포함시켜 준다.
   1. <input type="hidden" name="name" value="value">
3. 위에서 만든 폼을 submit() 하여 실행한다.

 

위와같은 과정을 함수로 만들어 놓고 필요할때 스크립트에 포함해서 사용하면 편하다.

function pageGoPost(d){
	var insdoc = "";
    
	for (var i = 0; i < d.vals.length; i++) {
	  insdoc+= "<input type='hidden' name='"+ d.vals[i][0] +"' value='"+ d.vals[i][1] +"'>";
	}
    
	var goform = $("<form>", {
	  method: "post",
	  action: d.url,
	  target: d.target,
	  html: insdoc
	}).appendTo("body");
    
	goform.submit();
}

 

사용법은 아래와 같다.

pageGoPost({
	url: "xxx.html",	//이동할 페이지
    target: "_self",
    vals: [				//전달할 인수들
    	["인수1", "인수값1"],
        ["인수2", "인수값2"],
        	.
            .
            .
	]
});

예: xxx.html 페이지로 인수값 a=1, b=2 을 전달할 경우

pageGoPost({
  url: "xxx.html",
  target: "_self",
  vals: [
    ["a", 1],
    ["b", 2]
  ]
});