다양한 웹페이지 호출 방법 (jquery 포함)

1. form 내용 button으로 submit

:
:
생략

<form action="/board/modify" method="get">

<input type="text" name="email">

<button type="submit"> submit </button>

</form>



생략
:
:

submit 버튼을 누르면 /board/modify url로 email이란 네이밍을 갖는 value를 get방식으로 전송한다.

가장 기본적인 방식이다.

 

2. form 내용 script에서 submit (jquery 이용)

:
:
생략

<form action="/board/modify" method="get">

<input type="text" name="email">

<input type="text" name="nick">

<button type="submit"> submit </button>

<button type="button" id="normal_btn"> button </button>

</form>

<script>

$("#normal_btn").click(function () {
	var actionForm = $("form"); //form 가져옴
    
    actionForm.empty(); //form에 있는 input들 삭제
    
    var nick = $("input[name='nick']");  //nick만 보낼것임
    
    actionForm.append(nick);
    
    actionForm.attr("action", "/board/list").attr("method", "get");
	
    //actionForm.attr("enctype", "multipart/form-data"); //enctype도 변경 가능, 당연히 Post만 가능
    
    actionForm.submit();
}

</script>


생략
:
:

form에 정의 되어있는 action경로 그리고 method 형식, Content-Type등을 수정하여 submit 하고 싶을때 사용하는 방법.

actionForm.empty(); 을 해주지 않으면 form 안에 있는 input의 value들이 전부 보내짐.

그리고 전달 된 input 값들은 get이라면 이동하는 페이지의 url에도 포함이됨..

필요한 input만 append하여 보낼 수 있음.

 

3. a태그를 이용하여 링크로 이동

:
생략
<a href="/board/list?page=1&size=10"> 링크 이동 </a>
:
생략

url에 파라미터를 전송하는 get방식으로 이동

 

 

이상 평상시 주로 사용하는 웹페이지 이동 방법이다.

변경이 용이하여 마음대로 조작할 수있는 2번 방법을 많이 사용한다.

클릭시 바로 submit 아닌 form 내부에 input 태그를 동적으로 생성하여 서버로 보내고 싶은 값을 조작 생성하여 담고 보낼 수있다..