Ajax(2) - jQuery로 사용하기

1. $.ajax() 메소드

jQuery로 Ajax를 사용하기 위해 $.ajax() 메소드를 사용한다.

여기서 $는 jQuery 객체를 의미하는데, jQuery에서 ajax() 메소드를 제공한다고 해석할 수 있다.

ajax 메소드의 인자로 url주소와 추가 옵션들을 정할 수 있다.

 

사용 예시

$(function() {
    $("선택자").on("click", function() { //해당 요소를 [클릭]시 호출
        $.ajax({
            url: "/path.php", //요청을 보낼 서버의 URL주소
            data: { name: "jooyeok", age: "24"}, //서버로 보낼 데이터
            type: "GET", // 요청 방식
            dataType: "json" // 서버에서 보내줄 데이터 타입
        })
        .done(function(json) { //요청 성공시 콜백함수가 실행됨
            alert("요청 성공");
        })
        .fail(function(xhr, status, errorThrown) { //요청 실패시 콜백함수가 실행됨
            alert("요청 실패");
        })
        .always(function(xhr, status) { //요청 성공/실패 여부와 관계없이 콜백함수가 실행됨 
            alert("요청 완료");
        });
    });
});

 

 

2. 기타 메소드

1) $.get() : Ajax 요청으로 데이터를 받을 때 사용

url주소(, 콜백함수)를 인자로 넣는다.

$(function() {
    $("선택자").on("click", function() {
        $.get("url 주소",
        function(data, status) {
            //data:전송받은 데이터, status:전송 성공 여부
        });
    });
});

 

2) $.post() 메소드 : Ajax 요청으로 데이터를 주고 받을 때 사용

url주소(, 데이터, 콜백함수)를 인자로 넣는다.

$(function() {
    $("선택자").on("click", function() {
        $.post("url주소",
            { name: "kimcoder", age: "24" },
            function(data, status) {
                //처리
            }
        );
    });
});

 

3) $.load() 메소드 : HTML 코드를 불러올 때 사용

load() 메소드의 인자에는 URL 주소와 선택자를 띄어쓰기로 구분하여 하나의 문자열을 넣는다.

$(function() {
    $("선택자A").on("click", function() {
        //URL주소에 해당하는 파일내에서 선택자C에 해당하는 요소만을 읽어서 선택자B에 해당하는 요소안에 배치한다.
        $("선택자B").load("URL주소 선택자C");
    });
});

 

자료 참고 : www.tcpschool.com/ajax/ajax_jquery_ajax