9.1 jQuery의 $ 객체 및 ajax 메서드
jQuery에는 네트워크 작업을 위한 특수 전역 개체도 있습니다. 짐작할 수 있듯이 $
. 예, 그 이름입니다. 하지만 간단하고 편리합니다.
JavaScript에서 API에 요청을 보내고 수신된 응답을 처리한다고 가정해 보겠습니다. 이것은 다음과 같이 할 수 있습니다:
$.ajax({
type: "POST",
url: "api.codegym.cc",
data: {name: 'Bill', location: 'Radmond'},
success: function(msg){
alert( "Person found: " + msg );
}
});
그게 다야, 그게 모든 코드야. 우리는 요청과 응답 모두 필요한 모든 것을 설명하는 객체를 전달하는 객체의 $
메서드를 호출합니다 .ajax()
- 이 필드는
type
HTTP 요청 유형을 지정합니다.GET
또는POST
- 이 필드는 요청을 보낼 대상을
url
지정합니다 .url
- 이 필드는
data
JSON 형식의 요청 데이터를 지정합니다. - success 필드는 서버로부터 성공적인 응답 후 호출될 함수를 지정합니다 .
9.2 유용한 쿼리
그러나 데이터를 전송할 필요가 없는 경우 요청을 더 짧게 작성할 수 있습니다. 예를 들어 다음과 같은 간단한 POST 요청을 작성할 수 있습니다 .
$.post("ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
코드가 무엇을 하는지 아십니까 $( ".result" ).html( data );
? 추측해 봅시다...
문서에서 결과 클래스가 있는 요소를 찾고 그 안에 HTML 코드인 data 를 추가합니다 data
. 따라서 몇 줄 만에 서버에서 데이터를 다운로드하여 페이지에 추가할 수 있습니다. 글쎄, 그것은 아름다움이 아닌가? :)
GET 요청은 몇 줄로 작성할 수도 있습니다.
$.get("ajax/test.html"., function( data ) {
$( ".result" ).html( data );
});
스크립트를 다운로드하고 실행하시겠습니까?
$.ajax({
method: "GET",
url: "test.js",
dataType: "script"
});
최신 HTML 페이지를 받으시겠습니까?
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
인터넷에는 아주 좋은 jQuery 문서가 있습니다.
또한 모든 일반적인 질문은 Google에서 쉽게 검색할 수 있으며 StackOverflow에 있습니다.