[jQuery] 제이쿼리란, 메소드 체이닝

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리.

 jQuery는 css 검색 스타일로 원하는 위치를 정확하게 뽑아내어 요소를 추가/삭제하기 때문에 더 간단하고 편리하게 원하는 요소를 찾아낼 수 있음. 

 

[js] jQuery 제이쿼리란? (기본문법/ $의미/ functnion이 무엇)

 

jQuery 입문 | Ajax 사용 | Ajax 메소드 $.ajax() $.get() .load()

메소드 체이닝 

- done : HTTP 요청이 성공하면 요청 데이터가 done() 메소드로 전달

- fail :  HTTP 요청이 실패하면 오류와 상태에 대한 정보가 fail()메소드로 전달

- always : HTTP 요청 성공, 실패 상관없이 always() 메소드 실행 

 

$.ajax({
    url: "/rest/1/pages/245", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },  // HTTP 요청과 함께 서버로 보낼 데이터
    method: "GET",   // HTTP 요청 메소드(GET, POST 등)
    dataType: "json" // 서버에서 보내줄 데이터의 타입
})
// 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);
})
// 
.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다!");
});

 

$.getJSON()

서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답을 JSON 형식으로 받을 때 사용함 

$.getJSON("example?foo=1",   
    {   
        tags: "mount rainier",   
        tagmode: "any",   
        format: "json"   
    },   
    function(data) {   
        $.each(data.items, function(i,item) {   
          $("<img/>").attr("src", item.media.m).appendTo("#images");   
          if ( i == 3 )
		      return false;   
        });   
    });