초보자를 위한 Ajax통신으로 메뉴불러오기_(2)

Study/JavaScript 2023. 3. 9. 22:45

앞서 백단에서 데이터를 불러오기 위해 작업을 했는데, 궁금하신분들은 아래 링크를 통해 전에 올린 글을 참고 하시길

초보자를 위한 Ajax통신으로 메뉴불러오기_(1)

현재 회사에서 인사조회 관련 기능을 만들고 있는데, 인사조회를 하다보면 특정 팀을 누르면 그팀에 해당하는 사람들을 DB에 끌어와 화면에 뿌려줘야 하는 경우가 있는데, 내가 이번에 구현했던

cbn1218.tistory.com

https://cbn1218.tistory.com/32

controller에서 jsonView에 담았는데 그렇다면 이제는 프론트단을 만들어야 할때!

2.프론트단 로직 만들기

(1)HTML 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div class="leftDiv">
	<div class="leftInner">
		<div id="arrow"></div>
		<div id="text1" onclick="openDiv()">조직도</div>
	</div>
	<div id=leftInner2 style="display:none">
		<div>
			<b onclick="openPart1()">(1)영업부</b>
			<div id="part1"></div>
		</div>
		<div>
			<b onclick="openPart2()">(2)경영지원</b>
			<div id="part2"></div>
		</div>
	</div>
</div>

</body>

</html>

프론트단의 제일 기본이 되는 html 작성 코드이다. 블로그에 글쓰기 용으로 최대한 간결하게 작성 하였음.

참고로 각 text에 토글 기능을 구현하였고,

저처럼 눌렀을때 메뉴를 열고 닫고 하고 싶을때 토글 기능과 같이 구현 해야 하므로 아래 링크 참고 하시면 좋을듯!

https://cbn1218.tistory.com/22

초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기)

웹사이트나 앱을 보면 메뉴창을 열고닫는 기능이 있다. 이 기능을 신입기능을 쉽게 구현해 보겠다. 1.구현화면 위에 이미지는 내가 현재 구현한 메뉴 열고닫기 기능 또는 toggle창 기능인데 원리

cbn1218.tistory.com

(2)CSS 작성

<style type="text/css">
body{
width:400px;
}
.leftDiv{
float: left;
width:200px;
}
#arrow{
position:relative;
top:10px;
width: 10px;
height: 10px;
border-top: 2px solid black;
border-left: 2px solid black;
transform:rotate(45deg);
}
#text1{
position: relative;
left: 20px;
bottom: 10px;
}

#part1{
display: none;
}
#part2{
display: none;
}

</style>

(3) javaScript 작성

<script type="text/javascript">
var num1=0;
var num2=0;

function openPart1(){
	if(document.getElementById('arrow').style.display==='block'){
		document.getElementById('part1').style.display='none'	
	}else{
		document.getElementById('part1').style.display='block'
		var part="영업부"
		var position="#part1";
		
		if(num1<1){
			AJAX(part,position);	
		}	
		num1++;
	}
}

function openPart2(){

	if(document.getElementById('part2').style.display==='block'){
		document.getElementById('part2').style.display='none';
	}else{
		document.getElementById('part2').style.display='block'
		var part="경영지원";
		var position="#part2";
		
		if(num2<1){
			AJAX(part,position);	
		}
		num2++;
	}
}
function AJAX(part,position) {
	console.log("AJAX들어옴");
	
	$.ajax({
		/* 전송 전 세팅 */
		type:"POST",
		data:"part="+part, //화면에 입력한 데이터 위에 변수 선언한거
		url:"testPost.do", //데이터를 전송하여 저장시키는 url
		dataType:"json", //리턴타입, 성공여부를 json로 추출해줌
		
		/* 전송 후 세팅 */
		success: function(result) {
		
			for(var i=0;i<result.user.length;i++){
				$(position).append("<div onclick=employee("+result.user[i].number+")>"
						+result.user[i].name
						+" "
						+result.user[i].rank
						+"</div>");	
			}
			
			console.log("통신ok");
		},
	    error: function() { //시스템에러
	    	alert("오류발생");
	    	console.log("오류발생");
		}
	});
}
</script>

젤 중요한 javaScript 코드!!!

나는 특정 부서를 눌렀을때 메뉴가 펴지면서 해당 부서에 팀원들이 DB에서 불러와서 화면에 보여지길 원했다!

-첫번째 특정부서를 눌렀을때 ajax 함수가 작동을 해야 되digka -> oncilick 이벤트를 사용함->ajax이벤트를 작동시킴->

이때 중복으로 ajax함수를 불러오는걸 방지 하기위해 변수를 선언해주고 if문으로 거른다.

-두번째 ajax 함수를 호출하면서 매개변수로 해당 부서의 특정값 과 추후에 뿌려줄 위치를 지정하기위한 매개변수를 가지고 가서 ajax통신을 호출해 준다

-세번째 ajax함수를 호출!

type:"POST", ->http의 post 방식으로 넘겨줌

data:"part="+part, ->위에서 매개변수로 받아온 part의 특정값을 controller에 매개변수로 전달하여 넘겨줄수있음

url:"testPost.do", ->데이터를 어디 controller에 보낼건지에 대한 URL

dataType:"json", ->controller에서 불러온 데이터를 어떤 형식으로 받을건지에 대한 정의, 또는 리턴 타입

success 부분은 ajax통신을 호출하고 받아온 데이터를 꺼내올수 있는데, 배열형태로 키:값으로 받아 옴

그래서 for문을 돌려서 값을 꺼내야 함,

-네번째 append를 이용하여 JSP에 뿌려줘야할 값을 생성해주는데 나는 Div안에 onclick을 생성하여 그안에 값을 뿌려줌!

그럼 아래와 같이 생성이 되어 JSP에 뿌려주게 됨.

데이터는 result.user[i].name 과 result.user[i].rank 이 부분이 DB에서 불러와 controller에서 넘어온 부분으로

각각 이름과 직급의 데이터를 불러와 해당팀의 인원수 만큼 for문으로 불러와 뿌려준다고 생각하믄 좋을듯

마지막으로 "</div>" 닫아주는 태그로 마무리 지으면 위와 같은 html태그가 완성되어 내눈앞에 데이터가 촤아악 나오게 된다!

'Study > JavaScript' 카테고리의 다른 글

초보자도 간단하게 스프링으로 만드는 파일업로드 기능(spring file upload) (0)	2023.03.16
초보자를 위한 html요소 삭제하기 .remove().empty() .unwrap() (0)	2023.03.15
초보자를 위한 자바스크립트로 프린트 기능 구현하기 (1)	2023.03.03
초보자를 위한 화살표로 메뉴펼치기 구현(화살표 모양 토글 구현) (0)	2023.03.02
초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기) (0)	2023.02.12

ABOUT ME

bitna's study note bitna's study note

2.프론트단 로직 만들기

(1)HTML 작성

(2)CSS 작성

(3) javaScript 작성

'Study > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

2.프론트단 로직 만들기

(1)HTML 작성

(2)CSS 작성

(3) javaScript 작성

'Study > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바