개발하는 도중 뷰 전환을 위해 ajax 호출이 아닌 form 방식으로 POST 전송해야하는 경우가 발생했습니다.
물론, 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 접근 가능)
.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>