jQuery AJAX load() 메서드

jQuery load() 메서드

jQuery load() 메서드는 간단하지만 강력한 AJAX 메서드입니다.

load() 메서드는 서버에서 데이터를 로드하고, 반환된 데이터를 선택된 요소에 삽입합니다.

문법:

$("}}).load(URL,data,callback);

必需 URL 파라미터는 로드하고자 하는 URL을 정의합니다.

선택 사항 data 파라미터는 요청과 함께 전송되는 쿼리 스트링 키/값 셋을 정의합니다.

선택 사항 callback 파라미터는 load() 메서드가 완료되면 실행할 함수 이름을 정의합니다.

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

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</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() 메서드가 완료되면 알림 팝업을 표시합니다. load() 메서드가 성공적으로 완료되면 "외부 내용 로드 성공!"을 표시하고, 실패하면 오류 메시지를 표시합니다:

예제

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("외부 내용 로드 성공!");
    if(statusTxt=="error")
      alert("오류: "+xhr.status+": "+xhr.statusText);
  });
});

직접 시험해 보세요

jQuery AJAX 참조 매뉴얼

완전한 AJAX 메서드 참조를 원하시면, 우리의 jQuery AJAX 참조 매뉴얼。