jQuery - Ajax load() Method

jQuery - Ajax load() Method

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

load() 메서드는 서버에서 데이터를 로딩하고, 반환된 데이터를 선택한 요소에 넣습니다.

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

필수 URL 매개변수는 로딩하려는 URL을 지정합니다.

데이터 매개변수 선택은 요청과 함께 전송할 쿼리문자열 키/값 쌍 집합(a set of querystring key/value pairs)을 지정합니다.

콜백 매개변수 선택은 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> 요소로 로딩 합니다:

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("demo_test.txt");
      });
    });

URL 매개변수에 jQuery 셀렉터를 추가할 수도 있습니다.

다음 예제는 “demo_test.txt”파일 내부에서 id="p1"를 가진 요소의 콘텐츠를 특정 <div> 요소에 로딩합니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("demo_test.txt #p1");
      });
    });

콜백 매개 변수 선택은 load() 메서드가 완료 될 때, 실행할 콜백 함수를 지정합니다.
콜백 함수는 아래와 같은 다른 매개 변수를 가질 수 있습니다.

• responseTxt - 호출이 성공한 경우, 결과 콘텐츠를 포함합니다
• statusTxt - 호출 상태를 포함합니다
• xhr-XMLHttpRequest - XMLHttpRequest 오브젝트를 포함합니다

다음 예제에서는 load() 메서드가 완료된 후, 경고 상자(alert box)를 표시합니다.
load() 메서드가 성공하면, “External content loaded successfully!”가 표시되고, 실패하면 오류 메시지가 표시됩니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("demo_test.txt", function (responseText, statusTxt, xhr) {
          if (statusTxt == "success")
            alert("External content loaded successfully!");
          if (statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        });
      });
    });

모든 jQuery AJAX 메서드에 대한 전체 개요를 보려면, jQuery AJAX Reference로 이동하십시오.