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 통신을 하고 나서 실행되는 콜백 함수를 설정하여 후처리를 통신 후 처리를 진행할 수 있습니다.
콜백함수 |
설명 |
done(callback) |
요청 성공 시에 호출되는 함수입니다. |
fail(callback) |
요청 실패 시에 호출되는 함수입니다. |
always(callback) |
성공, 실패 관계 없이 항상 호출되는 함수입니다. |
done
$.ajax({
url : "/url",
data : {
name : "gil-dong",
location : "seoul"
},
})
.done(function(data) {
// 전송한 data를 출력
alert(data);
});
ajax 콜백 함수는 ajax 함수에 연결 연산자를 붙여서 사용합니다.
[Jquery] 제이쿼리 이벤트 등록 메서드를 사용하기 (2) | 2020.12.11 |
---|---|
[Jquery] 제이쿼리로 Ajax 다루기 (0) | 2020.10.23 |
[Jquery] 제이쿼리 선택자와 document.ready 사용 (0) | 2020.10.07 |