JQuery form post 전송 - jQuery form post jeonsong

Question

개발하는 도중 뷰 전환을 위해 ajax 호출이 아닌 form 방식으로 POST 전송해야하는 경우가 발생했습니다.

목차 Show

select 선택 시 바로 폼 전송
전송 버튼이 아닌 요소를 클릭 시 폼 전송
폼 전송 전에 특정 작업 수행
유효성 검사

물론, stackoverflow와 같은 사이트에 수 많은 예시가 있지만 저 또한 기록을 위해 간략하게 코드를 작성해보겠습니다.

example.js

Example.java

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Example {
	private String exampleField1;
    private String exampleField2;
}

ExampleController.java

[개발환경] Windows, STS 3.9.11, Java 1.8, jQuery 3.2 버전

: submit 사용하지 않고 ajax로 form 전송 (실제 submit 했을 때와 동일하게 파일 $_FILES 접근 가능)

<form id="tmpSendFrm" enctype="multipart/form-data" method="post">
	<input type="text" name="age" />
	<input type="text" name="tel" />
	<input type="file" name="files" />
	<button type="button" onclick="clkBtn()">버튼</button>
</form>

<script type="text/javascript">
	// 버튼 클릭 시 실행
	function clkBtn(){
		// Get form
		var form = $('#tmpSendFrm')[0];

		// Create an FormData object 
		var data = new FormData(form);

		$.ajax({
			type: "POST",
			enctype: 'multipart/form-data',
			url: '/document/upload.php',	// form을 전송할 실제 파일경로
			data: data,
			processData: false,
			contentType: false,
			cache: false,
			timeout: 600000,
			beforeSend : function() {
				// 전송 전 실행 코드
			},
			success: function (data) {
				// 전송 후 성공 시 실행 코드
				console.log(data);
			},
			error: function (e) {
				// 전송 후 에러 발생 시 실행 코드
				console.log("ERROR : ", e);
			}
		});
	}
</script>

.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다.

1 select 선택 시 바로 폼 전송
2 전송 버튼이 아닌 요소를 클릭 시 폼 전송
3 폼 전송 전에 특정 작업 수행
4 유효성 검사

select 선택 시 바로 폼 전송

select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jb-fruit' ).change( function() {
          $( '#jb-form' ).submit();
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <form method="POST" id="jb-form">
      <select name="fruit" id="jb-fruit" required>
        <option value=""></option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
    </form>
    <p><?php echo $_POST[ 'fruit' ] ?></p>
  </body>
</html>

전송 버튼이 아닌 요소를 클릭 시 폼 전송

form 외부의 요소를 클릭해도 폼을 전송하게 할 수 있다. 단, 이때 required는 작동하지 않는다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jb-submit' ).click( function() {
          $( '#jb-form' ).submit();
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <form method="POST" id="jb-form">
      <select name="fruit" id="jb-fruit" required>
        <option value=""></option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
    </form>
    <p id="jb-submit">Submit</p>
    <p><?php echo $_POST[ 'fruit' ] ?></p>
  </body>
</html>

폼 전송 전에 특정 작업 수행

폼을 전송하기 전에 특정 작업을 할 수 있다. 다음은 선택한 값을 알려주는 예이다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jb-form' ).submit( function() {
          alert( 'You selectd ' + $( '#jb-fruit' ).val() + '!' );
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <form method="POST" id="jb-form">
      <select name="fruit" id="jb-fruit" required>
        <option value=""></option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
      <input type="submit" value="submit">
    </form>
  </body>
</html>

유효성 검사

입력 또는 선택한 값이 유효한지 검사하는 게 사용할 수 있다. 다음은 select에서 빈 값을 선택했을 때 창을 띄우고, 전송을 하지 않는다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jb-form' ).submit( function( event ) {
          if ( $( '#jb-fruit' ).val() == '' ) {
            alert( 'Select!' );
            event.preventDefault();
          }
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <form method="POST" id="jb-form">
      <select name="fruit" id="jb-fruit">
        <option value=""></option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
      <input type="submit" value="submit">
    </form>
  </body>
</html>

jQuery form submit jQuery form Form; ajax 전송