개발

Ajax를 이용해 Post 요청하는 방법들

December 31, 2018

⚠ 이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!

jQuery 웹 프로그래밍을 하다보면 Ajax를 이용한 비동기 로딩을 하는 경우가 발생합니다.

비동기 로딩은 정말 리액티브한 웹을 구성하는데 있어 필수 불가결이지만 클라이언트 성능이 따라 어떻게 작용될지 모르는 사항이라... 이리저리 생각하고 따져봐야할게 많기도합니다. 그만큼 여러가지 상황에 대한 UI/UX 서포트도 들어가야하고요.

비동기요청에 대해 사용하는 방법은 각자 다르겠지만 저는 아랫 방법처럼 이용을 하고 있습니다. 더불어 일반적으로 가져온 데이터에 대해 파싱을 하는 경우가 많으므로 해당 내용에 대해서도 기록을 남기도록 하겠습니다.

$(function() {
    /** POST로 넘길값 적재 */
    let data = new FormData();
    data.append('POST_KEY', yourKey);
    data.append('POST_DATA', yourData);
 
    /** ajax로 요청 */
    $.ajax({
        data: data,
        type: 'POST',
        url: 'your_uri.php',
        cache: false, // 데이터를 캐싱하지 않음
        contentType: false, // Raw데이터로 요청페이지의 내용을 반환받음
        processData: false, // 요청페이지의 스크립트 행위를 안함
        success: function(data) {
            let obj = $.parseJSON(data); // 반환된 데이터 형식이 JSON이라면 객체로 파싱해 이용할 수 있다.
            console.log(obj.yourData);
 
            $.each(data, function (key, val) { // 다중데이터라면 이런식으로 파싱해 사용할 수 있다.
                console.log(val.yourData);
            });
        },
        error: function(data) { // 에러내용 콘솔에 출력
            console.log(data);
        }
    });
 
    /** 간단하게 post 로 요청 */
    $.post('your_uri.php', {POST_KEY: yourKey, POST_DATA: yourData}, function(data){
        // 거두절미하고 이렇게 간단하게 요청할 수도 있다.
        let obj = $.parseJSON(data);
        console.log(obj.yourData);
    });
 
});Copy

jQuery 버전업이 되면서 ajax 요청에 대해 아래 코드방식처럼 가이드라인을 새로 게재했더라고요. 뭐 별로 달라진건 없지만요. 간단하게 쓰기에는 위에 방법보다 깔끔한듯 싶습니다.

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "" + result + " degrees" );
  }
});
Copy