금융에 대한 모든 것

Jquery로 ajax 사용하기

 jquery를 이용하면 간편하게 ajax 통신을 있습니다

 

기본 사용법

$.ajax({
    type: "post",
    url: "/test",
    data: {param: 'string'},
    success: function() {
        alert('성공');
    }
         ...
});

기본 사용법은 ajax 괄호 안에 ajax 관련 속성과 값을 설정하여 통신할  있습니다. ajax 관련 속성은 아래와 같습니다.

 

분류

속성

설명

기본

type

통신 타입을 설정합니다. (get, post)

url

요청할 url 설정합니다.

 

data

서버에 요청할 보낼 매개변수를 설정합니다.

 

dataType

응답 받을 데이터 타입을 설정합니다.(xml, plain, html, json )

 

설정

async

비동식으로 처리할지의 여부를 설정합니다. (true 경우 비동기식, false 경우 동기식)

statusCode

HTTP 상태코드에 따라 분기처리되는 함수를 설정합니다.

 

jsonp

jsonp를 사용할 이용하는 파라미터명을 설정합니다.

 

async

비동기 통신의 여부를 설정합니다.

 

contentType

서버로 요청할 데이터 타입을 설정합니다. (application/json, text/plain, text/html )

 

처리함수

success

요청 응답에 성공했을 처리 구문을 설정합니다.

error

요청 응답에 실패했을 처리 구문을 설정합니다.

 

complete

모든 작업을 마친 처리 구문을 설정합니다.

 

beforeSend(xhr)

ajax 요청이 가기 전에 실행하는 처리 구문을 설정합니다.

 

 

예시

$.ajax({
    type: "post",
    url : "/url",
    data : {sampleInput : "sampleData"},
    success : function(data) {
        // Sucess시, 처리
        alert(data);
    }, 
    error : function(xhr, textStatus, errorThrown){
        // Error시, 처리
        alert(xhr);
        alert(textStatus);
        alert(errorThrown);
    }
});

 

결과

ff

 

Ajax와 콜백 함수

ajax 통신을 하고 나서 실행되는 콜백 함수를 설정하여 후처리를 통신 처리를 진행할 있습니다.

 

콜백함수

설명

done(callback)

요청 성공 시에 호출되는 함수입니다.

fail(callback)

요청 실패 시에 호출되는 함수입니다.

always(callback)

성공, 실패 관계 없이 항상 호출되는 함수입니다.

done

$.ajax({
    url : "/url",
    data : {
      name : "gil-dong",
      location : "seoul"
    },
})
.done(function(data) {
    // 전송한 data를 출력 
    alert(data);
});

ajax 콜백 함수는 ajax 함수에 연결 연산자를 붙여서 사용합니다.

 

 

 

반응형