$.ajax() 메서드

제이쿼리는 단순하게 자바스크립트를 편하게 사용하기 위해 사용하는 것인 줄 알았는데

제이쿼리가 Ajax의 프레임워크라는 것을 알게되었다.

​

1. $.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("요청이 완료되었습니다!");

});

​

http://www.tcpschool.com/ajax/ajax_jquery_ajax

 

 

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("끝");

}

})