개발

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

이 글은 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


#jQuery
0 개의 댓글
개발 카테고리의 다른 글
03/04/2019
PHP 배열, 다중배열속의 값 검사
PHP는 배열안의 데이터를 검사하는 메소드가 언어에서 지원해주는것이 있습니다. 검사할 데이터와 대상 배열을 파라미터로 전달해주면 배열을 순차적으로 검사 후 데이터의 유무에 따라 논리값을 반환해요.거기에 좀만 응용해서 다시 메소드로 감싸서 논리값에 따라 내가 필요한 결과 스트링값을 아래와 같이 바꿔줄 수 있...
12/31/2018
PHP 개행문자(엔터)나 특정 태그를 제거하는 방법
디비를 같이 운영하는 웹사이트에서는 저장되거나 화면에 띄워줄 데이터를 가공하는 경우가 발생합니다. 저같은 경우는 접속자의 세션값이나 쿠키값을 print_r()을 통해 문자열 데이터로 받았는데 그 문자열 내부에 개행문자와 중복된 띄어쓰기가 많아서 이런 내용을 제거하기 위해 찾아보다가 발견한 방법입니다. 일반적으...
12/27/2018
랜덤으로 한글이름 생성하기
목업 페이지를 만들거나 디비에 더미데이터를 넣기위해서 이름을 생성하는 경우가 있습니다. 데이터가 한 두개 정도라면 직접 타이핑해서 넣겠지만 넣어야할 데이터가 100개이상만 되도 수작업은 사실상 불가능하겠죠. 단순히 모든 한글글자중에 랜덤으로 3개만 섞어서 출력하면 될거같은데... 생각보다 한글에는 쓰지않는...
×