<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!--UI jquery -->
<!-- bootstrap 라이브러리가 나중에 와야합니다. -->
<script>
$(function() {
$("#accordion" ).accordion({
//컨텐트 사이즈에 맞게, 어코디언의 폭을 조절...
heightStyle:'content',/*default가 fill입니다 */
active:false,
collapsible: true
});
$("#accordion h3").on('click', function(){
var text=$(this).text();
//1. 비동기 통신 시작....
if(text=="IT Education Subject"){
$.ajax({
type:'post',
url:'front.do',
data:'command=subject',
success:function(data){
$('#subject').html(data);
}//callback
});//ajax
}else if(text=="Association Global IT Company"){
$.ajax({
type:'post',
url:'front.do',
data:'command=company',
success:function(data){
$('#itCom').html(data);
}//callback
});//ajax
}
});//click
$('#createSection').on('click', function(){
var footercontent = "<h3>HowToGet</h3><div>서울 서초동 459 엔코아 아카데미 남부터미널 777</div>";
$(this).remove();//버튼을 없앤다.
//$('#accordion').append(footercontent);//동적으로 아코디언을 생성하는 기능
$('#accordion').append(footercontent).accordion('destroy').accordion({
heightStyle:'content'
});//accordian
});//button click
});//jquery
</script>
</head>
<body>
<div id="accordion">
<h3>Encore Academy Introduction</h3>
<div>
플레이 데이타의 새로운 교육 프로그램을 소개합니다.<br>
아래 섹션에서 이수할 교육과목을 확인하시기 바랍니다.
</div>
<h3>IT Education Subject</h3>
<div id="subject">
</div>
<h3>Association Global IT Company</h3>
<div id="itCom">
</div>
</div>
<hr>
<input type="button" value="Creat Section addition" id="createSection">
</body>
</html>
package servlet.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("*.do")//들어오는 모든 요청
public class DispatcherServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String command = request.getParameter("command");
System.out.println(command);
Controller controller = HandlerMapping.getInstance().createContoller(command);
String path = "index.jsp";
ModelAndView mv = null;
try {
mv = controller.handle(request, response);
path = mv.getPath();
}catch(Exception e) {
System.out.println(e);
}
if(mv!=null) {
if(mv.isRedirect()) response.sendRedirect(path);
else request.getRequestDispatcher(path).forward(request, response);
}
}
}
package servlet.controller;
public class HandlerMapping {
private static HandlerMapping handler = new HandlerMapping();
private HandlerMapping() {
};
public static HandlerMapping getInstance() {
return handler;
}
public Controller createContoller(String command) {
Controller controller = null;
if(command.equals("subject")) {
controller = new SubjectController();
System.out.println("SubjectController Creating");
}else if(command.equals("company")) {
controller = new companyController();
System.out.println("SubjectController Creating");
}
return controller;
}
}
package servlet.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SubjectController implements Controller {
@Override
public ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("getSubjectController 진입");
//비즈니스 로직 호출... 결과값 리턴 받았다 치고,
String result = "Algorithm|Big Data|Deep Learning|Restful API|Vue.js";
request.setAttribute("result",result);
return new ModelAndView("Result.jsp");
}
}
package servlet.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class companyController implements Controller {
@Override
public ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("CompanayController 진입");
String result = "<ul><li> Tomato System</li><br> "
+ "<li>Ahn Lab Corporation</li><br> "
+ "<li>East Enginneering</li><br> "
+ "<li>NCSoft System</li><br> "
+ "<li>Encore Softmax Academy</li></ul><br>";
request.setAttribute("result", result);
return new ModelAndView("Result.jsp");
}
}
package servlet.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public interface Controller {
ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception;
}
package servlet.controller;
/*
* 결과페이지 이름과 이동방식(forward|redirect)에 대한 정보를 답고 있는 객체
* ModelAndView(Spring MVC 라이브러리에서 따옴)
*/
public class ModelAndView {
private String path;
private boolean isRedirect;
// default가 false니까요. 기본이 forward라는 의미 입니다.
// 생성자가 path만 있어도 된다는 것은, default가 false입니다.
public ModelAndView() {
}
public ModelAndView(String path, boolean isRedirect) {
this.path = path;
this.isRedirect = isRedirect;
}
public ModelAndView(String path) {
this.path = path;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public boolean isRedirect() {
return isRedirect;
}
public void setRedirect(boolean isRedirect) {
this.isRedirect = isRedirect;
}
@Override
public String toString() {
return "MedelAndView [path=" + path + ", isRedirect=" + isRedirect + "]";
}
}
'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
droppable 활용 (0) | 2020.06.17 |
---|---|
JQuery .css() (0) | 2020.06.15 |
append, prepend, appendTo, prependTo, before, after (0) | 2020.06.13 |
D-day 구하는 로직 (0) | 2020.06.11 |
input안에 내용 변화 감지하는 이벤트 (0) | 2020.06.10 |