본문 바로가기
HTML│CSS│Java Script

Ajax 자바 스크립트 다른 jsp 파일 읽기

by 자유코딩 2018. 7. 21.

data . jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h2 style="background-color: yellow;"> 삽입 내용1</h2>
    <h2 style="color: red"> 삽입 내용2</h2>
</body>
</html>
 

 

ex01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 jsp 가져오기</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(function() {
        $("#get").click(function() {
            $("#res").load("data.jsp");
        });
    });
</script>
</head>
<body>
    <div>
        <div><h2>원래 제목</h2></div>
        <div id="res"></div>
        <button id="get">가져오기</button>
    </div>
    
    <hr />
    <div>
        <div><h2>원래 제목</h2></div>
        <div><jsp:include page="data.jsp"></jsp:include> </div>
    </div>
    <hr />
    <div>
        <div><h2>원래 제목</h2></div>
        <div><%@include file="data.jsp" %></div>
    </div>
    <hr />
    <div>
        <div><h2>원래 제목</h2></div>
        <div style="width: 700px; height: 500px; " >
            <iframe src="data.jsp" style="width: 100%; 
            height: 100%; border: none;" ></iframe>    
        </div>
    </div>
</body>
</html>
 

 

 

ex02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    div{width: 180px; height: 80px; margin: 3px; float: left;}
</style>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(function() {
        $("#menu1").click(function() {
            $("#msg1").load("menu.html");    
        });
        $("#menu2").click(function() {
            // 일부만 추출
            $("#msg2").load("menu.html li");    
        });
    });
</script>
</head>
<body>
    <div>
        <p><a href="#" id="menu1">메뉴보기1</a></p>
        <span id="msg1"></span>
    </div>
    <div>
        <p><a href="#" id="menu2">메뉴보기2</a></p>
        <span id="msg2"></span>
    </div>
</body>
</html>
 

 

 

menu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p> 중 식 메 뉴 </p>
    <ul>
        <li>메밀국수</li>
        <li>파스타</li>
        <li>불고기</li>
        <li>김밥</li>
    </ul>
    <p> 메뉴를 골라 주세요 </p>
</body>
</html>

 

 

저작자표시 비영리 변경금지

'HTML│CSS│Java Script' 카테고리의 다른 글

Ajax 로 json , xml 읽어들이기 3  (0) 2018.07.21
Ajax json xml 파일 읽기 2  (0) 2018.07.21
Ajax 자바스크립트로 xml , json 파일 읽기  (0) 2018.07.21
html1208  (0) 2017.12.07
html 1207  (0) 2017.12.07

관련글

댓글

티스토리툴바