[PHP HTML JS] HTML 에서 페이지 이동하는 방법, 새 창으로 페이지를 새로 띄우는 방법, GET과 POST의 차이

[HTML에서 페이지 이동하기]

우리가 인터넷을 하다보면 버튼을 누를 때, 데이터를 입력할 때 페이지가 이동하는 것을 쉽게 볼 수 있다.

HTML로 웹 개발을 할 때, 페이지를 이동시키는 방법은 무엇일까?

방법은 여러가지 있다.

  ● 방법 1> a href 사용하기

<a class="p-2 text-muted" href="TEST.php">T E S T</a>

- a 태그를 사용해서 href(하이퍼링크)를 거는 방법이다.

- html이 저장되어 있는 php, html 파일을 링크로 걸어도 되고 http://naver.com 등의 하이퍼링크를 걸어도 된다.

 

  ● 방법 2> HTML 태그

<meta http-equiv="refresh" content="0;URL='http://example.com/'">

- 위 meta 태그를 사용하면 0초만에 해당 URL로 넘어간다는 뜻이다.

- 0초가 아닌 5초로 하고 싶으면 0대신 5를 입력하면 된다.

 

  ● 방법 3> onClick 사용하기(javascript 사용하기)

<button type="button" class="btn btn-primary active" id="btn" 
	onclick="document.location.href='test.php'">test</button>

- javascript의 document.location.href 혹은 window.location.href 를 사용해서 사용할 수 있다.

- 이것 역시 php, html 파일을 링크로 걸어도 되고, 도메인 주소를 사용할 수 있다.

 

<button class='dropdown-item' type='button' onclick='login(`$id`)'>테스트</button>

function login(id)
{
        let uid = '';
        if (iframe.style.display == 'block')
        {
            uid = document.getElementById('uid').value;
        }
        window.location.href = 'test.php?id='+id+"&uid="+uid;
}

- 위에처럼 onclick에서 js 함수를 불러와서 필요한 대로 코드를 수행하여 링크를 변경할 수도 있다.

 

  ● 방법 4> submit/form 사용하기

<form id = "form_test" name = "form_test" method = "post" action = "test.php">
	<div id="login">
		<input type="text" name="id" value='우럭이' placeholder="username"/>
		<input type="password" name="pass" placeholder="password"/>
	</div>
	<div id="submit">
		<input type="submit" value="submit"/>
	</div>
</form>

- form 태그 안에 submit을 비롯하여 넘기고 싶은 데이터들을 input 태그를 사용해야 한다

- form은 form 태그 안에 존재하는 input들만 페이지 변경 시 데이터를 가져갈 수 있다.

- type이 submit인 버튼을 누르면 form 이 실행되어 페이지가 변경된다.

- 입력하지 않아도 데이터를 넘기고싶다면 value = '넣고싶은 데이터'로 사용할 수 있다.  placeholder 는 value로 인지하지는 못하지만 입력하지 않아도 유저에게 보여줄 수 있는 데이터이다.

- form에서 method로 GET 형식인지, POST 형식인지 결정할 수 있다. 또, action으로 어떤 페이지로 옮길지 정할 수 있다.

- GET과 POST 방식의 차이는 아래와 같다.

GET	POST
가져오기, 조회용 : 어떤 정보를 가져오기	부치기, 제출용 : 어떤 정보를 제출하기
url에 변수를 포함시켜 요청(데이터 노출 위험) 데이터가 헤더에 포함되어 전달됨 길이 제한 존재	데이터가 BODY에 포함되어 전달됨 URL에 데이터가 노출되지 않음 길이 제한 없음

- input으로 입력받지 않아도 데이터를 넘기고 싶으면 아래와 같이 hidden 키워드를 사용하면 된다.

<input type="hidden" name="type" value="test"/>

 

---

 ● 번외> HTML에서 새 창으로 페이지 열기

<a class="btn btn-sm btn-outline-secondary" href="#" 
	onClick="window.open('https://dnf-lover.tistory.com/', '_blank')">dnf-lover</a>

- JS의 window.open 키워드를 사용하면 새 창으로 페이지를 열 수 있다.

- JS함수를 사용해야 하기 때문에 href를 걸지 말고 onClick 에서 JS 함수를 사용해야 한다.