AJAX FORM 데이터 전송

기존에 ajax로 form 데이터 전송 시 $("#form_id").serialize()의 형태로 데이터를 전송하는것을 알고 당연하게 사용하고 있었다.

 

Fingerprint를 사용하기 위해 Form에 데이터를 추가해주려고 했지만 서버에 Fingerprint를 셋팅하기 위해서는 유료버전을 사용해야 하는것 같았고 jsp에 <input type="hidden"> 으로 셋팅하자니 사용자의 위변조 가능성이 있는점을 생각해 API 호출 시점에 Fingerprint 값을 생성해 값을 전송하고자 하였다.

 

기존 로직을 최대한 건드리지 않기 위해 기존 ajax에서 $("#form_id").serialize() 형태로 전송하던 데이터에 간단하게 파라미터를 추가하고 싶어 방법을 찾아보았다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#submitBtn').click(function(){
    // 폼 데이터 가져오기
    var formData = $('#myForm').serialize();
    
    // 추가할 데이터
    var additionalData = "&additionalData=추가할 데이터";
    
    // Ajax 요청
    $.ajax({
      type: 'POST',
      url: 'your_backend_url',
      data: formData + additionalData,
      success: function(response) {
        console.log(response);
      },
      error: function(xhr, status, error) {
        console.error('요청 실패:', error);
      }
    });
  });
});
</script>

 

데이터 serialize 시 URL에 붙는 queryString과 동일한 형태로 데이터가 셋팅되기 때문에 간단하게

$("#form_id").serialize() + "&data=" + data의 형태로 데이터를 추가해주었다.