[JS] POST 방식으로 데이터 전송

데이터 전송 시에는 <FORM> 태그를 이용하는 것이 가장 편리하지만, 여의치 않은 경우 JavaScript로 데이터를 전송해야 한다.

JavaScript로 데이터를 전송할 때, 여기저기서 정형화된 틀이 있었는데, 이를 활용했다.

<script>
  function sendPost(url, params) {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('target', '_blank');
    form.setAttribute('action', url);
    document.charset = "UTF-8";

    for (var key in params) {
      var hiddenField = document.createElement('input');
      hiddenField.setAttribute('type', 'hidden');
      hiddenField.setAttribute('name', key);
      hiddenField.setAttribute('value', params[key]);
      form.appendChild(hiddenField);
    }

    document.body.appendChild(form);
    form.submit();
  }
</script>

데이터를 전송할 때에는 아래와 같이 전송하면 된다.

sendPost(URL 경로, { 데이터명: 데이터 });

 

Javascript는 CLIENT 언어이기 때문에 POST로 보낸 데이터를 받지 못한다. 그러므로 POST로 보낸 데이터를 받으려면 JSP나 PHP로 받아야 하는데, PHP로 받는 방법은 아래와 같다.

sendPost('detail_action.php', { param: 'test1' });

위와 같은 방법으로 데이터를 전송하게 되면 PHP에서 다음과 같이 받으면 된다.

<?php
    $param1 = $_POST['param'];
?>