[헤이버디] Ajax를 이용하여 상세정보 불러오기

---

 

아작스를 사용하게 되면 <c:out>을 통해서 데이터를

 

불러오기가 어려워진다. 그 경우 ajax를 통해서

 

db의 데이터를 불러오는 방법을 알아보자

 

---

 

 

planList.jsp

 

 

<input type="hidden" id="hyplSeq1" name="hyplSeq">
<h5>제목</h5>
<input class="form-control mb-3" type="text" id="hyplName1" name="hyplName" autocomplete="off"> <br>
<h5>일정내용</h5>
<input class="form-control mb-3" type="text" id="hyplDesc1" name="hyplDesc" style="height: 100px;" autocomplete="off">
<br>
<h5>📅날짜</h5>
<div class="form-control" style="border-radius: 10px;">
<h6>시작일</h6>
<input class="form-control mb-3" type="text" id="hyplDate1" name="hyplDate" <fmt:formatDate value="${hyplDate1}" pattern="yyyy-MM-dd HH:mm:ss"/> autocomplete="off">
<h6>종료일</h6>
<input class="form-control mb-3" type="text" id="hyplEndDate1" name="hyplEndDate" <fmt:formatDate value="${hyplEndDate1}" pattern="yyyy-MM-dd HH:mm:ss"/>  autocomplete="off">
</div>
<h5>👨‍👧‍👧공유된 멤버</h5>
<input class="form-control mb-3" type="text" id="hyplMemberName1" name="hyplMemberName" disabled>
<div class="form-control mb-3">

 

 

 

seq는 hidden으로 받고

 

id에는 hyplSeq1..hyplName1 이런식으로 아작스에 적용한

 

데이터 들이 불러와질수록 있도록 하였다.

 

name과 id가 다른 이유는 상세보기에서 바로 수정도

 

할 수 있도록 하기 위함이다.

 

 

 

 

	const exampleEvents = [ {
			seq : '6',
			title : '고추참치',
			start : '2022-05-01 00:00:00',
			backgroundColor : cGreen,
			borderColor : cGreen,
		}]

 

 

 

달력에서 사용 하 는 있는 이벤트 객체들

 

 

 

 

$.ajax({
					async : false,
					cache : false,
					type : "post",
					url : "/plan/planViewAjax",
					data : {
						"hyplSeq" : hyplSeq
					},
					/* 컨트롤러갔다와서 실행 */
					success : function(data) {
						console.log(data);
						
					$("#btnForm2").click(); 
						
						$("#hyplSeq1").val(data.hyplSeq);
						$("#hyplName1").val(data.hyplName);
						$("#hyplDesc1").val(data.hyplDesc);
						$("#hyplDate1").val(data.hyplDate);
						$("#hyplEndDate1").val(data.hyplEndDate);
						$("#hyplMemberName1").val(data.hyplMemberName);	
                        
					}

					,
					error : function(jqXHR, textStatus, errorThrown) {
						alert("ajaxUpdate " + jqXHR.textStatus + " : "
								+ jqXHR.errorThrown);
					}
				});

			}

		}).render()
	</script>

 

 

 

간략하게 설명하자면,

 

 

상세보기하기 위한 ajax 

 

 

 

planController.java

 

@ResponseBody
	@RequestMapping(value = "/plan/planViewAjax")
	public Plan planViewAjax(@ModelAttribute("vo") PlanVo vo, HttpSession httpSession, Model model) throws Exception {
		
		vo.setHyspSeq((String) httpSession.getAttribute("hyspSeq"));
		vo.setHyplName((String)httpSession.getAttribute("hyplName"));
		vo.setHyplDate((String)httpSession.getAttribute("hyplDate"));
		vo.setHyplDesc((String)httpSession.getAttribute("hyplDesc"));
		vo.setHyplMemberName((String)httpSession.getAttribute("hyplMemberName"));
		
		Plan rt = service.selectOne(vo);
		
		model.addAttribute("rt", rt);  // model.add...페이지가 로드될때 된다고함
		
		return rt;
		
	}

 

 

 

여기있는 주소는, ajax의 Url과 같게 해주어야 한다.

 

 

 

 

plan.java

 

 

당연히 내가 사용할 데이터는 

 

선언해줘야 된다.

 

 

package com.owl.heybuddy.modules.plan;

import java.util.Date;

public class Plan {

	private String hyplSeq;
	private Integer hyplDefaultNy;
	private String hyplName;
	private String hyplDate;
	private String hyplEndDate;
	private int hyplMember;
	private String hyplMemberName;
	private Integer hyplTypeCd;
	private String hyplDesc;
	private Integer hyplDelNy;
	
	// hybdMember

 

 

 

Getter/Setter은 당연히 

 

해줘야된다.

 

 

 

 

결과값

 

 

 

 

 

이렇게 일정이 있는데,

 

클릭하게 되면!

 

 

 

 

 

 

데이터들이

 

매핑 되는것을 알 수 있다.

 

여기서 수정까지 바로 할 수 있는데,

 

다음 포스팅에서 

 

수정을 하겠다.

---

 

 

 

To be continue..