Ajax
$.ajax() 메서드
뚜벅뚜벅뚜벅이
2022. 8. 6. 20:32
반응형
제이쿼리는 단순하게 자바스크립트를 편하게 사용하기 위해 사용하는 것인 줄 알았는데
제이쿼리가 Ajax의 프레임워크라는 것을 알게되었다.
- $.ajax() 메서드
$.ajax({
url: "/examples/media/request_ajax.do", // 클라이언트가 요청을 보낼 서버의 URL 주소
data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터
type: "GET", // HTTP 요청 방식(GET, POST)
dataType: "json"
// 서버에서 보내줄 데이터의 타입
: ContentType 과 항상 햇갈렸는데 data를 보낼때의type 이니까 dataType인 줄 알았는데 반대다,,
dataType이 받을때의 Type이고 ContextType 이 보낼때의 Type이다.
})
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {
$("<h1>").text(json.title).appendTo("body");
$("<div class=\"content\">").html(json.html).appendTo("body");
})
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) {
$("#text").html("오류가 발생했습니다.<br>")
.append("오류명: " + errorThrown + "<br>")
.append("상태: " + status);
})
// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
.always(function(xhr, status) {
$("#text").html("요청이 완료되었습니다!");
});
2. success 와 error
$.ajax({
url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터
type: "GET", // HTTP 요청 방식(GET, POST)
dataType: "json" ,
success: function(data){
//데이터 요청이 성공적으로 이루어지면 실행될 부분
console.log("성공");
},
error : function(data){
//데이터 요청이 실패하면 실행될 부분
console.log("실패");
},
complete: function(data){
//데이터 요청의 성공, 실패 여부에 상관없이 요청이 끝나면 실행
console.log("끝");
}
})
반응형