[헤이버디] Ajax를 이용하여 데이터를 넣기

---

정말, 이거 하나 찾아내는데 오랜 시간이 걸린것 같다.

 

아작스에 대해서 제대로 배운적도 없고,

 

그냥 구글링, 유튜브검색, 을 통해서 알아냈다는 것 자체가 감격이다.

 

정말,,,, 이틀 동안 이것을 찾기 위해서 얼마나 고생했나 싶다.

 

 

---

결과값

 

 

다음과 같은 상태에서, 데이터를 등록해볼게요.

 

 

 

 

이렇게 등록하기나, 날짜 아무거나 눌러주면

 

등록할 수 있도록 모달창이 뜨게된다.

 

 

 

 

 

이런식으로 작성을 해주고

 

등록하기 눌러주면 된다.

 

 

 

 

 

 

그리고 PlanList를 다시 확인해보면

 

5월 20일자에 내가 적은 일정이 

 

적히는 것을 확인 할 수 있다.

 

 

이 과정을 Ajax를 하였으니 간단하게 설명해보겟다.

 

PlanMpp.xml

 

 

일단, 내가 만든 프로젝트다 보니,

<select id="selectList" resultMap="resultMapObj">
		SELECT
			a.hyplSeq
			,a.hyplName
			,a.hyplDefaultNy
			,a.hyplDelNy
			,a.hyplDate
			,a.hyplDesc
			,a.hyplMemberName
			,b.hyspSeq
		FROM
			hybdPlan AS a
		LEFT JOIN hybdSpace AS b ON a.hyspSeq = b.hyspSeq
		WHERE 	1 = 1
		 AND	b.hyspSeq = ${hyspSeq}
	</select>

 

 

다음은 쿼리를 내가 짜준것인데, 일단 다음 설명하기 앞서 hybdPlan은 내가 만든 일정 테이블

 

이름이고, hyplSeq~ hyplMemberName까지는 테이블내 속성, hyspSeq는 참조되는 외래키를 말한다.

 

왜 외래키가 있냐고 질문에 간단하게 설명하자면, 일정에 대한 내용들을 workSpace 별로 나눴기 때문이다.

 

그러니까 workSpace에 내에서 있는 유저들이 올린 일정만 보이기 하기 위해 작성한 것이다.

 

 

 

 

PlanController.java

 

 

컨트롤러는 연결 연결 시켜주는 역할 이라고 생각한다.

 

뭐.. 사람마다 생각이 다르겟지만, 나는 그렇게 생각한다.

 

 

 

	@ResponseBody
	@RequestMapping(value = "/plan/planListAjax")
	public List<Plan> planListAjax(PlanVo vo, HttpSession httpSession) throws Exception {
		
		vo.setHyspSeq((String) httpSession.getAttribute("hyspSeq"));
		
		List<Plan> planList = service.selectList(vo);
		
		System.out.println("getHyspSeq : " + vo.getHyspSeq());
		
		
		return planList;
		
	}

 

 

 

Ajax를 사용하기 위해서 다음과 같은 코드를 주가햇다.

 

RequestMapping(value= "/plan/planListAjax")로 작성한 이유는

 

내가 선언할 Ajax 주소로 보내주어 그 주소의 ajax를 실행 하기 위함이다.

 

 

 

 

planList.jsp

 

 

 

 

	$.ajax({
			async: false
			,cache: false
			,type: "post"
			,url: "/plan/planListAjax"
			,success: function(data){
				
				$.each(data, function(i){
					
					const obj = new Object();
					
					obj.seq = data[i].hyplSeq;
					obj.title = data[i].hyplName;
					obj.start = data[i].hyplDate;
					obj.backgroundColor = "var(--bs-success)";
					obj.borderColor = "var(--bs-success)";
					
					console.log(obj);
					
					exampleEvents.push(obj);
					
				});
				
				console.log("sdfsdfsffsdfsdf");
				console.log(exampleEvents);
				
			}
			
			,error : function(jqXHR, textStatus, errorThrown){
				alert("ajaxUpdate " + jqXHR.textStatus + " : " + jqXHR.errorThrown);
			}
		});

 

 

 

나는 처음에 아작스를 어떻게 사용해야 되는지 몰랏다.

 

 

console.log는 F12 눌럿을때 데이터 들을 확인 하기 위함이고,

 

type는 POST,인지 GET인지 확인하는것

 

url은 아까 planController.java에 선언한 url에서 호출받는것이다.

 

success 부터 이제 함수의 시작 (data) 는 데이터를 가져 오겟다는것

 

const obj = new Object();  obj라는 객체를 선언함 (const 임으로 변하지 않는 값을 가져올것)

 

변하는 값일 경우 let을 주로 사용함

 

obj.seq <- 이건 내가 선언해주는것

 

obj.seq = data[i].hyplSeq;  obj객체내에 seq라는 변수라는 값에 data[i] 배열모형이지만 데이터를 배열형태로 hyplSeq 속성에 있는 데이터를 넣어주겟다는 소리이다.

 

 

 

그르니까 이데이터를 배열 형태로 가져오겟다는 소리이다. 

 

 

 

 

console.log(obj); 는 F12를 눌러 데이터가 들어오는지 확인하기 위해 적었다.

 

exampleEvents.push(obj); 이게 진짜 중요한것인데

 

이 선언이 바로  exampleEvents에 push 넣어주겟다는 것이다 obj의 객체에 담은 데이터들을.

 

exampleEvents에 내용들을 보여주자면

 

 

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

 

이안의 데이터들을 말한다.

 

다음은 내가 예시로 쓴것이니 신경쓰지 않아도 된다.

 

 

그리고 내가 Space별로 나눌 수 있었던 이유는 

 

 

 

 

 

 

And 절에 다음과 같은 코드를 넣엇기 때문에 들어오는 데이터 값마다 매핑이 될수 있던거다.

 

 

 

그리고 planController.java 에서

 

 

다음 코드가 꼭 있어야지, 아작스로 데이터 집어 넣어진다.

 

안넣으면 계속해서 b.hyspSeq = ? 이라는 오류가 계속 

 

발생 하게 될것이다.

 

 

 

 

 

---

 

 

 

To be continue..