jQuery/Ajax
-
-
ajax 통신 과정jQuery/Ajax 2021. 10. 28. 21:47
1. 자바스크립트 파일 function subscribeInfoModalOpen(pageUserId) { $(".modal-subscribe").css("display", "flex"); $.ajax({ url: `/api/user/${pageUserId}/subscribe`, dataType: "json" }).done(res => { console.log(res); res.data.forEach((u)=>{ let item = getSubscribeModalItem(u); $("#subscribeModalList").append(item); }); }).fail(error => { console.log("구독정보 불러오기 오류", error); }); } 2. apicontroller 파일 @GetM..
-
기호jQuery/Ajax 2021. 10. 27. 22:19
$(".modal-subscribe") : 이렇게 . 이 붙으면 jsp 파일에서 class 를 의미 $("#subscribeModalList") : 이렇게 # 이 붙으면 jsp 파일에서 id를 의미 예를들어 let principalId = $("#principalId").val(); header.jsp 파일에서의 id= "principalId" 값을 header.js 파일에서 principalId 로 받아서 사용함 참고 자료 : 이지업 사이트 "스프링부트 SNS 프로젝트 - 포토그램 만들기"
-
Ajax 기본적인 형태 (+pageable 예시)jQuery/Ajax 2021. 10. 27. 14:21
Ajax - 페이지 이동없이 데이터 교환 및 화면 갱신 가능 (비동기 처리) Ajax 문법 $.ajax({ url: "", type: "", cache: , dataType: "", data: "", success: function(data){ }, error: function (request, status, error){ } }); url : 요청 url type : 데이터 전송방식( GET, POST) 만약 type 을 정해주지 않으면 기본적으로 GET 방식이 적용됨 cache : 요청 페이지 캐시 여부( false, true) datatype : 서버에서 받아올 데이터를 어떤 형태로 해석 ( xml, json, html, script 선택) data: 서버로 데이터 전송 시 사용 success : ..