Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 리스트
- 납입
- 중도인출
- 자바스크립트
- 사망
- 웹개발
- 뇌출혈
- 파이썬
- jQuery
- 보험료
- 급성심근경색증
- 코딩
- 문자열
- 수수료
- 프로그래밍
- 인출수수료
- 변환
- Vue.js
- 추가납입
- 특약
- python
- 교보
- Java
- javascript
- 교보생명
- 가입
- 보험
- 심장질환
- 프론트엔드
- PythonProgramming
Archives
- Today
- Total
SeouliteLab
jQuery를 사용한 AJAX 요청 방법 본문
소개:
AJAX(Asynchronous JavaScript and XML)는 웹 페이지에서 비동기적으로 서버와 통신하는 기술입니다. jQuery를 사용하면 간편하게 AJAX 요청을 보낼 수 있습니다. 이 글에서는 jQuery를 사용하여 서버에 AJAX 요청을 보내는 방법을 알아보겠습니다.
AJAX 요청 보내기:
jQuery를 사용하여 AJAX 요청을 보내려면 $.ajax() 메서드를 사용합니다. 이 메서드는 서버에 데이터를 요청하고 응답을 처리하는데 사용됩니다. 다양한 옵션을 설정하여 요청을 커스터마이징할 수 있습니다.
설정:
jQuery 라이브러리를 웹 페이지에 포함시켜야 합니다. CDN(Content Delivery Network)을 통해 제공되며, <script>
태그를 사용하여 로드할 수 있습니다.
예제: jQuery를 사용한 AJAX 요청
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="btnLoad">데이터 불러오기</button>
<div id="result"></div>
<script>
$(document).ready(function(){
$('#btnLoad').click(function(){
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
dataType: 'json',
success: function(data){
$('#result').text(JSON.stringify(data));
},
error: function(xhr, status, error){
console.error('AJAX 요청 실패:', status, error);
}
});
});
});
</script>
</body>
</html>
출력 결과:
{"name": "John", "age": 30}
설명:
위 예제에서는 버튼 클릭 이벤트가 발생하면 서버에 GET 요청을 보내고, 성공적으로 데이터를 받아오면 결과를 페이지에 출력합니다. $.ajax()
메서드의 옵션으로는 URL, HTTP 메서드, 데이터 타입 등을 설정할 수 있습니다. 성공적인 응답을 처리하는 함수와 요청이 실패했을 때 호출되는 함수를 지정할 수 있습니다.