Javascript & JQuery & CSS

$(selector).load(URL,data,callback);

필수 URL 매개 변수는로드하려는 URL을 지정합니다.
선택적 data 매개 변수는 요청과 함께 전송할 쿼리 문자열 키 / 값 쌍 세트를 지정합니다.
선택적 콜백 매개 변수는 load () 메서드가 완료된 후 실행할 함수의 이름입니다 .

예제 파일의 내용은 다음과 같습니다. "demo_test.txt":

< h2 > jQuery와 AJAX는 재미 있습니다 !!! < / h2 >
< p id = "p1"> 단락의 일부 텍스트입니다. < / p >
다음 예제에서는 "demo_test.txt"파일의 내용을 특정 <div> 요소에로드합니다.

예
$ ( "#div1" ) .load ("demo_test.txt" );

URL 매개 변수에 jQuery 선택기를 추가 할 수도 있습니다.
다음 예제에서는 "demo_test.txt"파일 안에 id = "p1"인 요소의 내용을 특정 <div> 요소로 로드합니다.

예
$ ("# div1" ) .load ( "demo_test.txt #p1" );
​
선택적 callback 매개 변수는 load () 메서드가 완료 될 때 실행할 콜백 함수를 지정합니다 .
콜백 함수는 다른 매개 변수를 가질 수 있습니다.

responseTxt - 호출이 성공하면 결과 컨텐트를 포함합니다.
statusTxt - 호출 상태를 포함합니다.
xhr - XMLHttpRequest 객체를 포함합니다.

다음 예제에서는 load () 메서드가 완료된 후 경고 상자를 표시합니다. 상기 중간 부하 () 메소드가 성공, 그것은! "외부 콘텐츠가 성공적으로로드"표시하고 실패 할 경우 오류 메시지가 표시됩니다
 

$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("외부 콘텐츠를 성공적으로로드했습니다!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
});

<script type="text/JavaScript">
$(document).ready(function() {

	 $("*[obj-type=loadPage]").on("click", function() {

            var page_info = $(this).attr('page-info');

            layerLoad(page_info);
	 });
});


function layerLoad(page)
{
    var page_info = $.parseJSON( page.replace(/\'/g, "\"") );

    console.info('target:' + page_info.target);
	param_info	= "page=2";

    $("#"+page_info.target).load(page_info.view, param_info, function(res, status, xhr){

        if( status == "error")
        {
            alert("페이지 로딩에 실패했습니다.\n");
            return;
        }

    });
}


</script>

<div>
<ul>
	<li obj-type="loadPage" page-info="{'type':'left11', 'view':'/test/test1.asp','target':'aaa'}">메뉴1</li>
	<li obj-type="loadPage" page-info="{'type':'left22', 'view':'/test/test2.asp','target':'bbb'}">메뉴2</li>
	<li obj-type="loadPage" page-info="{'type':'left33', 'view':'/test/test3.asp','target':'ccc'}">메뉴3</li>
</ul>
</div>

<div id="aaa"></div>
<div id="bbb"></div>
<div id="ccc"></div>