form 태그에 동적으로 파라미터 추가

form 태그에 추가되어 있는 태그를 제외하고 다른 데이터를 파라미터로 추가 해야할 경우 사용한다.

구성환경 : Spring boot + Thymeleaf 템플릿엔진 + Jquery

 

- html

<form action="Controller의 RequestMapping 주소"
             method="POST" id="detailForm" name="detailForm" enctype="multipart/form-data">
    <input type="text" id="name" name="name">
    <button type="button" id="form_submit">저장</button>
</form>

 

- script

<script>
$(document).ready(function(){
    $("#form_submit").on('click', function(){
        let form_data = $("#detailForm").serialize();
        form_data += '&phone='+'01022223333';
        $("#form_submit").submit();
    })
})
</script>

 

Jquery 의 .serialize() 함수를 사용하면 Form 태그 안의 데이터들을 한번에 모두 보낼 수 있는 데이터로 직렬화 해주기 때문에 사용한다.

 

Form data를 .serialize() 함수를 통해서 데이터 직렬화를 시키면 아래 이미지와 같다.

위 이미지와 같이 "&" 표시와 함께 데이터가 표시된다.

 

.serialize() 함수를 통해 form_data에 저장하고 추가할 데이터는 "&변수명=변수값" 으로 문자열을 추가해준다.

그런 다음 .submit() 함수를 통해 Controller에게 데이터를 전송한다.