초보자를 위한 Ajax통신으로 메뉴불러오기_(2)
앞서 백단에서 데이터를 불러오기 위해 작업을 했는데, 궁금하신분들은 아래 링크를 통해 전에 올린 글을 참고 하시길
초보자를 위한 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태그가 완성되어 내눈앞에 데이터가 촤아악 나오게 된다!