Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery의 .get() 메소드: 데이터 가져오기 본문
.get() 메소드란?
jQuery의 .get()
메소드는 AJAX를 통해 서버로부터 데이터를 가져오는 기능을 제공합니다. 이를 통해 서버에 HTTP 요청을 보내고, 서버로부터 데이터를 비동기적으로 가져올 수 있습니다.
예제로 배우는 .get() 메소드 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .get() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
$(document).ready(function(){
$.get("https://jsonplaceholder.typicode.com/posts/1", function(data, status){
if (status === "success") {
$('#result').text(JSON.stringify(data));
} else {
$('#result').text("데이터를 가져오는 데 실패했습니다.");
}
});
});
</script>
</body>
</html>
설명
위 예제에서는 .get()
메소드를 사용하여 외부 API에서 데이터를 가져오는 간단한 예제를 보여줍니다.
$.get()
메소드는 첫 번째 매개변수로 요청할 URL을 받고, 두 번째 매개변수로 성공 또는 실패 시 실행할 콜백 함수를 받습니다.- 성공적으로 데이터를 가져온 경우 콜백 함수에 데이터와 상태(status)가 전달됩니다.
- 콜백 함수 내에서 데이터를 처리하고 결과를 웹 페이지에 표시합니다.
- 이 예제에서는 JSONPlaceholder라는 가짜 REST API에서 첫 번째 포스트의 데이터를 가져와서 결과를 페이지에 표시하고 있습니다.
.get()
메소드를 사용하면 jQuery를 통해 간단하게 서버로부터 데이터를 가져올 수 있습니다. 이를 통해 외부 API와 통신하여 데이터를 활용하는 웹 애플리케이션을 개발할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
jQuery.noConflict() 메소드: jQuery 충돌 회피하기 (0) | 2024.04.09 |
---|---|
jQuery의 .index() 메소드: 요소의 순서 가져오기 (0) | 2024.04.09 |
jQuery의 .each() 메소드: 요소를 순회하며 작업하기 (0) | 2024.04.09 |
jQuery의 .wrapInner() 메소드: 내부 요소 감싸기 (0) | 2024.04.08 |
jQuery의 .wrapAll() 메소드: 여러 요소를 감싸기 (0) | 2024.04.08 |