28. jquery Method [ .load() ] - 다른 경로에 있는 문서를 가져와 현재 문서에 넣어주는 메소드

문법

.load(url data complete)

url은 가져올 문서

data는 가져올 문서에서의 data

complete는 요청이 완료되면 호출되어질 콜백 함수입니다.

예제코드

027.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>Home</title>
	</head>
	<script type="text/javascript">
    $(document).ready(function(){
    	var str = "     MelonPeach     ";
    	$("#a").html(str);
    	$("#b").html(jQuery.trim(str));
    	
    });
	</script>
	<body>
		<pre id="a"></pre>		
		<pre id="b"></pre>
		<pre id="c">WellCome</pre>
	</body>
</html>

028.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>Home</title>
	</head>
	<script type="text/javascript">
	    $(document).ready(function(){
			$("#aa").load("/027");
			$("#bb").load("/027 #c", function(){
				alert($("#bb").text());				
			});
	    });
	</script>
	<body>
		<div id="aa"></div>
		<hr>
		<div id="bb"></div>
	</body>
</html>

id가 aa인 태그에 027문서를 가져옵니다.

id가 bb인 태그에 027문서안에 id가 c인 요소를 가져오고 완료되면

alert에 WellCome이 나옵니다.

실행 테스트