[jQuery] .load() 함수

 

.load() 

HTML문서 / 서버에서 가져온 데이터를 선택한 요소에 로드하기 위해 사용. ( Ajax 요청 )

페이지 일부를 동적으로 업데이트할 때 사용.

 

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

 

 - selector : jQuery 선택자. (데이터를 로드할 위치)

 - url : 데이터를 요청할 url.

 - data (선택사항) : 요청과 함께 서버로 전송할 데이터.

 - callback (선택사항) : 콜백함수 (로드작업 성공여부와 상관없이 실행)

 

---

 

( html파일 )

<div id="content">Content will be loaded here.</div>
<button id="loadContent">Load Content</button>

<script>
    $(document).ready(function() {
        $('#loadContent').click(function() {
            $('#content').load('content.html');
        });
    });
</script>

=> 버튼을 클릭하면 ' content.html '의 내용이 '#content' 요소에 로드된다. (기본 GET요청)

 

$('#content').load('content.html #section1');

=> ' content.html '의 특정부분인 '#section1'만 로드 가능.

 

---

( data와 함께 get요청 )

$('#content').load('server.php', { key1: 'value1', key2: 'value2' });

 

---

( callback함수 추가 )

$('#content').load('content.html', function(response, status, xhr) {
    if (status == "success") {
        alert("Content loaded successfully!");
    } else if (status == "error") {
        alert("An error occurred: " + xhr.status + " " + xhr.statusText);
    }
});

콜백함수는 로드가 완료된 후 호출

 

---

 

db에서 데이터를 가져와 로드한다면

(script)

$('#content').load('/example/url', function(response, status, xhr) {
    if (status == "success") {
        alert("Content loaded successfully!");
    } else if (status == "error") {
        alert("An error occurred: " + xhr.status + " " + xhr.statusText);
    }
});

 

( Controller )

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
public class ExampleController {

    @Autowired
    private ExampleService exampleService;

    @GetMapping("/example/url")
    public List<String> getExampleData() {
        // 서비스로부터 데이터를 받아와 클라이언트에게 반환
        return exampleService.getExampleData();
    }
}