[jQuery] Ajax GET 방식으로 데이터 받아오기 (feat. this)

노드 개인 프로젝트 작업 중, 간단한 후기를 남길 수 있는 게시판 페이지를 만들다가 문제에 봉착했다.

다음과 같이 "수정" 버튼을 누르면 해당 게시글이 input창으로 바뀌며 따로 페이지 이동 없이 ajax를 이용해서 수정을 하고 싶었기 때문이였다.

그래서, 처음에 작성한 코드가 이것

$(document).ready(function(){
	$("#update-btn").on('click', function(){
    	ids = $("#update-btn").val();
        
        $.ajax({
        	url: '/board/edit/:id',
            dataType: 'json',
            data: {
            	id: $("#update-btn").val(),
            },
            success: function(result) {
            	if (result) {
                	alert(result.idTask);
                }
            }

그런데, 결과값이 자꾸 :id 이렇게 뜨는 것이다!
그래서 url 값에 :id를 그대로 가져오는 것이라고 생각해서 내가 누를 수정 버튼 자체에 value 값으로 id를 넣어야겠다고 생각했다.

<button id="update-btn" value="<%= tasks._id %>" type="button">수정</button>

그런 다음 다시 실행을 시켜봤더니, 이번엔 아이디 값이 잘 받아와지긴했다. 그런데

저 두번째에 있는 수정 버튼을 눌렀을 때는 아무런 반응이 오지 않는 것이다. 왜 첫번째 버튼만 이벤트가 실행되는걸까 싶었는데

"#update-btn"을 this로 바꿔주었더니 각 개별 아이디값을 가져오는데 성공했다!

this
: 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)

전체 코드는 밑에.. (클릭 이벤트 함수도 살짝 수정해주었다)

$(document).on("click", "#update-btn", function(){         
	ids = $(this).val();
    
  	$.ajax({
  		url: '/board/edit/'+ids,
  		dataType: 'json',
  		type: 'GET',
  		data: {
  			id: $("#update-btn").val(),
  		},
  		success: function(result) {
  			if (result) {
  				alert(result.idTask);
  			}
  		}
  	})
})