SeouliteLab

jQuery의 .get() 메소드: 데이터 가져오기 본문

프로그래밍

jQuery의 .get() 메소드: 데이터 가져오기

Seoulite Lab 2024. 4. 9. 08:34

.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
'프로그래밍' Related Articles more