목차

jQuery - Ajax load() Method

  • description : jQuery - Ajax load() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-19


Source of the article

jQuery - Ajax load() Method

jQuery load() Method

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

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

Syntax:

$(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() 메서드가 완료 될 때, 실행할 콜백 함수를 지정합니다.
콜백 함수는 아래와 같은 다른 매개 변수를 가질 수 있습니다.


다음 예제에서는 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 Reference

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