태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

jQuery.post(), Ajax HTTP POST 방식 요청

8년 전

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

개요 : HTTP POST 방식 요청을 통해 서버로부터 데이터를 받습니다.

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
url 정보를 요청할 URL
data 서버로 보낼 data
success(data, textStatus, jqXHR) 요청이 성공하면 실행될 콜백 함수
dataType 서버에서 반환되는 데이터의 타입. Default: 지능형 추측 (xml, json, script, html)
이 함수의 가장 간단한 사용법은 아래와 같습니다.
$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 전달되어 집니다. 또한 응답상태값도 문자열로 넘어옵니다.
jQuery 1.5부터 success 콜백 함수는 "jqXHR" 객체도 받을 수 있게 되었습니다.(jQuery 1.4까지는 XMLHttpRequest 객체를 받았음). 하지만, JSONP 나 크로스도메인(cross-domain)의 GET 요청 시에는 XHR을 사용하지 못합니다. 이러한 경우에서는 (j)XHR 나 textStatus 인자는 success 콜백 함수에서 "undefined"으로 인식됩니다.
대부분 성공 시의 핸들러를 지정하여 사용하게 됩니다.
$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});
위 예제는 HTML을 받아서 처리하고 페이지에 집어넣는 것입니다.
POST 방식은 절대 캐시 데이터를 사용하지 않습니다. 그래서 jQuery.ajaxSetup() 에서 설정한cache 와 ifModified 옵션은 이 방식의 요청에 영향을 주지 않습니다.
The jqXHR Object
jQuery 1.5부터, 모든 jQuery의 Ajax 함수는 XMLHTTPRequest 객체의 상위집합을 반환받을 수 있게 되었습니다. 이것을 jQuery XHR 객체 또는 "jqXHR" 라고 하며, $.get()을 사용하면 반환받을 수 있도록 구성되었습니다. 이런 약속된 인터페이스 구조는, 모든 속성들, 함수들 그리고 약속된 동작들을 포함합니다.(Deferred object 를 참고하세요). 편의성과 지속성을 위해 콜백명을 $.ajax()에서 사용할 수 있고, 여기에서 .error(), .success(), .complete() 함수들을 이용할 수 있습니다. 이런 함수들은 모두 동일한 이름으로 사용할 수 있는 인자들을 반환받아 처리할 수 있습니다.
또한, jQuery 1.5부터 $.get()을 포함하여 체인 형태로 엮어진 여러개의 .success(), .complete(), .error() 들을 단일 요청에 사용할 수 있게 되었고, 요청이 완료된 후에도 이들 콜백을 저정할 수 있습니다. 만일 요청이 이미 완료되었다 하더라도, 다시 불러서 쓸 수 있습니다.
// 요청이 완료된 후에 핸들러를 할당하고,
    //  이 요청에 대한 jqxhr 객체는 기억되어 집니다.
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

    // 이 부분에서 다른 작업을 수행한 후에도 ...

    // 또 다른 완료에 대한 함수를 적용할 수 있습니다.
    jqxhr.complete(function(){ alert("second complete"); });
Additional Notes: 브라우저 보안 정책에 의거하여 대부분의 "Ajax" 사용 시 same origin policy를 적용받게 됩니다. Ajax 요청은 다른 도메인, 다른 서브도메인, 다른 프로토콜 간에는 성공되지 못합니다. 만일jQuery.get()를 수행하면 error 코드가 넘어오고, .ajaxError() 함수에서 다루지 않는 한 따로 처리되지 않습니다. Alternatively, as of jQuery 1.5 부터는, jqXHR 객체를 가지고 .error() 함수에서 다룰 수도 있습니다. Script 와 JSONP 요청은 same origin policy restrictions 이 적용되지 않습니다.
예 제   test.php 에 요청하지만, 반환 결과는 무시합니다.
$.post("test.php");

예 제   데이터를 포함하여 test.php 에 요청합니다.(단, 반환 결과는 무시합니다.)
$.post("test.php", { name: "John", time: "2pm" } );

예 제   배열 형태의 데이터를 서버로 보냅니다.(여전히 반환 결과에는 신경쓰지 않습니다.)
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

예 제   폼 데이터를 보냅니다.
$.post("test.php", $("#testform").serialize());

예 제   test.php 의 요청 결과를 알림창으로 보여 줍니다.
$.post("test.php", function(data) {
   alert("Data Loaded: " + data);
});

예 제   test.php에 데이터를 보내고 반환된 결과를 알림창으로 보여 줍니다.
$.post("test.php", { name: "John", time: "2pm" },
   function(data) {
     alert("Data Loaded: " + data);
   });

예 제   test.php에 데이터를 보내고 반환된 결과를 process() JavaScript 함수로 전달합니다.
$.post("test.php", { name: "John", time: "2pm" },
function(data) {
   process(data);
},
"xml"
);

예 제   test.php 페이지가 json 형태의 데이터 (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)를 반환하면 그 데이터를 디버그를 위한 콘솔에 뿌립니다.
$.post("test.php", { "func": "getNameAndTime" },
function(data){
   console.log(data.name); // John
   console.log(data.time); //  2pm
}, "json");

예 제
POST 방식으로 폼 데이터를 전송하고 결과를 div 에 표시합니다.(이 예제는 여기서 작동하지 않습니다.)
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form action="/" id="searchForm">
   <input type="text" name="s" placeholder="Search..." />
   <input type="submit" value="Search" />
  </form>
  
  <div id="result"></div>

<script>
  /* attach a submit handler to the form */
  $("#searchForm").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get some values from elements on the page: */
    var $form = $( this ),
        term = $form.find( 'input[name="s"]' ).val(),
        url = $form.attr( 'action' );

    /* Send the data using post and put the results in a div */
    $.post( url, { s: term },
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).empty().append( content );
      }
    );
  });
</script>

</body>
</html>

jQuery.get() 의 쌍둥이입니다. 단, post()는 캐시된 정보를 절대 사용하지 않는다는 커다란 차이점이 있습니다. 구분해서 잘 사용하시기 바랍니다.