프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] JavaScript 함수호출을 통해 POST방식으로 페이지 이동(A태그 사용)

2015.04.22
글을 올린 배경 : 페이지 이동시 GET방식은 쉽게 존재하나 보안상 취약한 이야기를 많이 들어서 POST방식을 사용하는 방법을 찾게 됨

1. 자신의 창(self창)에 POST방식으로 페이지 이동하는 방법(A태그 사용)
ex)
<!-----------자바스크립트 함수부분-----------------------------------------
function page_move(s_page,s_name,s_value){
var f=document.paging; //폼 name
f.page.value = s_page; //POST방식으로 넘기고 싶은 값
f.src_name.value = s_name; //POST방식으로 넘기고 싶은 값
f.src_value.value = s_value;//POST방식으로 넘기고 싶은 값
f.action="XXXXXXX.php";//이동할 페이지
f.method="post";//POST방식
f.submit();
}
<!-----------자바스크립트 함수부분-----------------------------------------

<!-----------본문 부분중에(여러개의 목록이 반복될시)------------------------
<form name="paging">
<input type="hidden" name="page"/>
<input type="hidden" name="src_name"/>
<input type="hidden" name="src_value"/>
...........

<?php
//[처음][*개앞]
if($block > 1) {
$prev=$first-1;
echo "<a href=\"javascript:page_move('1','$src_name','$src_value');\">[처음]</a>  ";
echo "<a href=\"javascript:page_move('$prev','$src_name','$src_value');\">[$page_num 개 앞]</a>";
}

//[이전]
if($page > 1) {
$go_page=$page-1;
echo " <a href=\"javascript:page_move('$go_page','$src_name','$src_value');\">[이전]</a>  ";
}
?>
...........
</form>
<!-----------본문 부분중에(여러개의 목록이 반복될시)------------------------



2. 새창을 띄우면서 POST방식으로 페이지 이동하는 방법

ex)
<!-----------자바스크립트 함수부분-----------------------------------------
<script>
function content_view(idnum){
var f=document.contents; //폼 name
myWin=window.open('','POP','location=no,status=no,toolbar=no,scrollbars=no,width=650,height=650');
f.id.value = idnum; //POST방식으로 넘기고 싶은 값(hidden 변수에 값을 넣음)
f.action="XXXXXXX.php"; //이동할 페이지
f.target="POP"; //폼의 타겟 지정(위의 새창을 지정함)
f.method="post"; //POST방식
f.submit();
}
</script>
<!-----------자바스크립트 함수부분----------------------------------------

<!-----------본문 부분중에(여러개의 목록이 반복될시)------------------------
<form name="contents">
<input type="hidden" name="id"/>
...........
<input type='button' value='보기' onClick='javascript:content_view(ID값);'/>
...........
<input type='button' value='보기' onClick='javascript:content_view(ID값);'/>
...........
<input type='button' value='보기' onClick='javascript:content_view(ID값);'/>
...........
</form>
<!-----------본문 부분중에(여러개의 목록이 반복될시)------------------------

이상으로 간단한 예제를 적습니다.

공부시에 많은 도움되면 좋겠습니다.

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3517
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3524
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2173
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20769
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 327
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 353
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 618
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 689
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 674
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 630
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669