[jquery]비동기호출 - $.get()

🐲기본문법

$.get(url, data, success);

==$.ajax({url:loc, method:'get', success:function(){}})

• url (필수): 요청을 보낼 URL을 지정
• data (선택): 서버에 전송할 데이터. 객체 형태로 전송할 수 있으며, 쿼리 문자열 형식()으로 자동 변환됨.
• success (선택): 요청이 성공적으로 완료되었을 때 서버에서 반환된 데이터를 받는다.

 

$.get('https://api.example.com/data', { id: 123 })
    .done(function(response) {
        console.log(response);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        console.error('Error: ' + textStatus, errorThrown); 
        //error: 요청이 실패했을 때 호출되는 콜백 함수.
    });

 
https://api.example.com/data로 GET 요청을 보내며, { id: 123 }라는 데이터를 쿼리 문자열 형식으로 전송한다.
$.get()은 jQuery의 AJAX 메서드인 $.ajax()의 간단한 형태이므로, 더 많은 기능이 필요할 경우 위와 같이 $.ajax()를 사용하는 것이 좋다.
참고: [jquery] ajax()

[jquery] ajax()

 

🐲예제

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

let val = $('#num').val();
$.get(loc + val, function(result) {
	result_display(result);
});

사용자가 입력한 값(val)을 사용하여 GET 요청을 보내서  https://reqres.in/api/users/5 (loc + val) 형식으로 서버에 전송된다.
 

	e.preventDefault();
	e.stopPropagation();

 

• e.preventDefault(): 기본 이벤트 초기화(href로 이동한다.)
  e.stopPropagation(): 이벤트 버블링을 방지한다.
  💡위 두 메소드는 항상 같이 다닌다.

 

	let clickedAEl = e.target;
	let val = clickedAEl.innerHTML;

• 클릭한 서버의 data를 비동기로 가져와서 출력한다.

$.get(loc + val, function(result) {
	result_display(result);
});

• $.get():클릭한 링크의 내용을 가져와서 해당 숫자에 대한 GET 요청을 보낸다.