jQuery - $().load()

요청한 결과 값을 매치되는 요소에 삽입할 수 있는 AJAX 메소드입니다. 형식은 다음과 같습니다.

$(select).load(url [, data] [, callback]);

POST 나 GET 방식에 동일하게 사용할 수 있으며, 다음 속성을 사용할 수 있습니다. data 객체는 POST 로 전송할 때만 사용하며, 선택한 요소에 반환 값을 삽입하는 게 특징입니다.

속 성	설 명
url	전송될 URL. 필수 선택
data	서버에 POST 로 요청을 보낼 때 파라미터 값. 선택사항
callback	매치되는 요소에 삽입한 후에 실행할 콜백 함수. 선택사항 콜백 함수에 사용될 매개변수는 다음을 사용 responseText: 요청이 성공하면 결과 내용을 받음 statusText: 요청 상태를 텍스트로 반환   success 나 error 와 같은 요청 상태 문자열 xhr: XMLHttpRequest 객체를 받음   상태와 상태 코드를 갖고 있는 객체

// URL 만 요청하는 경우
$(select).load("example.php");


// URL 과 data 를 함께 요청하는 경우
// data 는 POST 전송에만 사용
$(select).load("example.php", {name: '하보니', age: 20, jop: 'IT'});

// GET 으로 전송하는 경우
$(select).load("example.php?name=하보니&age=20&job=IT");


// URL 과 콜백 함수로 요펑하는 경우
$(select).load("example.php", function(){
  alert("전송하였습니다.");
})

반환 받은 내용은 선택한 요소에 바로 삽입합니다.

// POST 로 전송할 때
$(select).load("example.php", {name: '하보니', age: 20, job: 'IT'});

or

// GET 으로 전송할 때
$.get("example.php?name=하보니&age=20&job=IT");

아래는 GET 으로 요청을 보냅니다.

<!-- 
test.php 의 예제

<?php
print_r($_GET);
?>
//-->


<script>
$(function(){
 $("button").click(function(){
   $("#user").load("test.php?user=habony", function(){
     alert("완료하였습니다.");
   });
 });
});
</script>

<button>ajax 받아오기</button>
<div id="user"></div>

콜백 함수의 매개 변수를 사용한 예제입니다.

<script>
$(function(){
 $("button").click(function(){
   $("#user").load(
     "test.php?name=하보니",
     function(responseText, statusText, xhr){
       if(statusText == 'success'){
         alert("성공");
       } else {
         alert("fail:" + xhr.status + ", " + xhr.statusText);
       }
     }
   });
 });
});
</script>

다음은 요청 내용 중에서 특정한 요소만 읽어 들여야 할 때 사용합니다. 예를 들어 <div id="userid">내용</div> 인 데이터를 포함하는 문자열을 가져와야 할 때 url 다음에 공백을 넣고, 그 다음 선택자를 넣어주면 부분적으로 가져올 수 있습니다.

<script>
$(function(){
 $("button").click(function(){
   $("#user").load("test.php?name=하보니 #userid");
 });
});
</script>

위 예제에서 test.php 파일에 요청을 보내면 받은 결과값 중에서 아이디가 "userid" 인 요소의 내용만 요소에 삽입합니다.