ajax의 결과 값을 타임리프로 출력하는법 질문드립니다!

Question

ajax를 사용해 controller로 요청해서 결과 값을 비동기로 출력하려고 합니다.값은 제대로 넘겨 받는 것 같은데, 출력이 제대로 되지 않아서 질문합니다. ㅠㅠ잘못된 부분이 있다면 지적해주시면 감사하겠습니다!scriptfunction searchCTList(componentcategoryNo) { $.ajax({ url : "/admin/searchCTList", data : {"componentcategoryNo" : componentcategoryNo}, type : "POST", dataType : "json", async : false, success : function(data) { var viewHtml = ""; console.log(data); viewHtml += ''; viewHtml += ' '; viewHtml += ''; $("#componenttable").append(viewHtml); console.log(viewHtml); } }); }Controller @PostMapping("/searchCTList") public ModelAndView searchCTList(@RequestParam("componentcategoryNo") int componentcategoryNo, Model model){ List entity = adminService.componentlist(componentcategoryNo); model.addAttribute("CTinfo", entity); System.out.println("###########" + entity); return new ModelAndView("jsonView"); }console 출력CTinfo: Array(3) 0: {componentNo: 9, componentTitle: 'i7-8700', componentMaker: 'Intel', componentPrice: 300000, componentStock: 20, …} 1: {componentNo: 10, componentTitle: 'i7-9700', componentMaker: 'Intel', componentPrice: 400000, componentStock: 20, …} 2: {componentNo: 11, componentTitle: 'i7-10700', componentMaker: 'Intel', componentPrice: 500000, componentStock: 20, …} length: 3append 결과 : 3개가 출력되어야 하는데, 하나만 출력 되고 끝납니다ㅠ

퀘이사123 · Answer

타임리프는 ssr, 서버사이드렌더링입니다. 서버에서 해당 타임리프문법을 보고 html파일을 수정해서 수정된 html파일을 클라이언트로 보내주는거죠.ajax를 통해 데이터를 받아와서 동적으로 붙이는건 csr, 클라이언트사이드렌더링이구요.즉, ajax를 통해 불러온 데이터는 이미 클라이언트사이드이기때문에 저런식으로 해봐야 클라이언트는 타임리프문법을 모르니 그냥 문자 그대로 박힐뿐입니다.타임리프문법을 쓸게아니라, javascript 문법을 써서 each돌리시면 됩니다.

ajax의 결과 값을 타임리프로 출력하는법 질문드립니다!

1개의 답변

Q&A 목록