jQuery - AJAX load() 메서드

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

jQuery load() 메서드

jQuery load()메서드는 서버에서 데이터를 가져오고, 반환된 HTML을 선택된 요소에 삽입합니다。

이 메서드는 웹 서버에서 데이터를 동기적으로 가져오는 간단한 방법을 제공합니다。

이는load()메서드의 문법：

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

파라미터：

• URL-요청할 URL을 지정합니다

• data -（선택 사항）서버로 요청과 함께 전송할 순수 객체 또는 문자열을 지정합니다

• callback-（선택 사항）load() 메서드가 완료되면 실행할 콜백 함수를 지정합니다

이 예제는 ajax_intro.txt 파일의 내용을 DIV 요소에 로드합니다：

$("button").click(function(){
　　$("div").load("ajax_intro.txt");
});

이 예제는 ajax_post.html 페이지를 로드하고 일부 다른 데이터를 전송합니다：데이터：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("div").load("ajax_post.php", data);
});

이는 PHP 파일의 모습입니다（"ajax_post.html"）：

<?php
　　　　echo "<p>Hello ".$_POST['fname']."　".$_POST['lname'].", How are u doing?</p>";
?>

요청 메서드：request를 사용하면데이터객체로 제공된다면 POST 메서드를 사용합니다. 그렇지 않으면 GET으로 가정합니다。

콜백을 사용하여 페이지를 로드합니다

선택 사항callback매개변수 지정load()메서드가 완료되면 실행되는 콜백 함수.

콜백 함수는 다른 매개변수를 가질 수 있습니다：

• response　 -요청에서의 결과 데이터를 포함합니다

• status -요청의 상태를 포함합니다（"success", "notmodified", "error", "timeout", 또는 "parsererror"）

• xhr-XMLHttpRequest 객체를 포함합니다

이 예제는 ajax_post.html 페이지를 로드하고 일부 다른 데이터와 알림 상태 메시지를 전송합니다：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("div").load("ajax_post.php", data, function(response, status){
　　　　alert(status);
　　});
});

이 예제는 Ajax 요청에서 오류가 발생할 때 알림을 표시합니다：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("#success").load("wrong_file.php", data, function(response, status, xhr){
　　　　if(status == "error"){
　　　　　　let msg = "Sorry but there was an error: ";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

페이지 부분 로드

jQuery load()메서드는 문서의 일부를만 가져오도록 허용합니다。

이는 jQuery 선택자를 추가하여 간단하게 구현할 수 있습니다。

다음 예제는 파일 'ajax_load.html'에서 ID가 'table'인 요소의 내용을 DIV 요소에 로드합니다：

$("button").click(function(){
　　$("div").load("ajax_load.html　#table");
});

jQuery AJAX 참조

전체 AJAX 메서드 참조에 대해 방문하십시오.jQuery AJAX 참조。