자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 03:10
jQuery .load() 함수
jQuery .load() 함수는 HTML 요소에 외부 URL의 내용을 로드하는 데 사용됩니다. 이 함수를 사용하면 HTML 요소에 동적으로 콘텐츠를 삽입할 수 있습니다.
# 기본 사용법
- `selector`: 로드할 HTML 요소를 선택하는 선택자입니다.
- `url`: 로드할 URL입니다.
- `data`: 로드할 URL에 전달할 데이터입니다. (옵션)
- `callback`: 로드 후 호출할 콜백 함수입니다. (옵션)
# 예제
# 로드 옵션
`.load()` 함수는 다음과 같은 옵션을 제공합니다.
- `cache`: 로드한 콘텐츠를 캐시할지 여부를 결정합니다. 기본값은 `true`입니다.
- `complete`: 로드 완료 후 호출할 콜백 함수입니다.
- `error`: 로드 실패 시 호출할 콜백 함수입니다.
- `method`: 로드할 URL의 HTTP 메서드를 결정합니다. 기본값은 `GET`입니다.
# 예제 (옵션 사용)
# 소스 코드 분석
`.load()` 함수는 jQuery의 `ajax` 모듈에 의해 구현됩니다. 이 함수는 다음과 같은 과정을 거칩니다.
1. 선택한 HTML 요소를 찾습니다.
2. URL을 파싱하여 HTTP 요청을 생성합니다.
3. HTTP 요청을 전송합니다.
4. 응답을 처리합니다.
5. 로드한 콘텐츠를 HTML 요소에 삽입합니다.
# 소스 코드
`.load()` 함수는 jQuery의 `ajax` 모듈에 의해 구현된 `ajax` 함수를 호출하여 HTTP 요청을 전송합니다. 로드한 콘텐츠는 jQuery의 `ajax` 모듈에 의해 처리되어 HTML 요소에 삽입됩니다.
Query .load() 함수는 HTML 요소에 외부 URL의 내용을 로드하는 데 사용
- 나우호스팅 21일 전 2025.02.22 03:10
-
20
0
jquery .load() jQuery .load() 함수
jQuery .load() 함수는 HTML 요소에 외부 URL의 내용을 로드하는 데 사용됩니다. 이 함수를 사용하면 HTML 요소에 동적으로 콘텐츠를 삽입할 수 있습니다.
# 기본 사용법
#hostingforum.kr
javascript
$(selector).load(url, data, callback);
- `selector`: 로드할 HTML 요소를 선택하는 선택자입니다.
- `url`: 로드할 URL입니다.
- `data`: 로드할 URL에 전달할 데이터입니다. (옵션)
- `callback`: 로드 후 호출할 콜백 함수입니다. (옵션)
# 예제
#hostingforum.kr
javascript
// HTML 요소에 외부 URL의 내용을 로드합니다.
$('#target').load('example.html');
// 데이터를 전달하여 로드합니다.
$('#target').load('example.html', { name: 'John', age: 30 }, function() {
console.log('로드 완료!');
});
# 로드 옵션
`.load()` 함수는 다음과 같은 옵션을 제공합니다.
- `cache`: 로드한 콘텐츠를 캐시할지 여부를 결정합니다. 기본값은 `true`입니다.
- `complete`: 로드 완료 후 호출할 콜백 함수입니다.
- `error`: 로드 실패 시 호출할 콜백 함수입니다.
- `method`: 로드할 URL의 HTTP 메서드를 결정합니다. 기본값은 `GET`입니다.
# 예제 (옵션 사용)
#hostingforum.kr
javascript
// 캐시를 사용하지 않습니다.
$('#target').load('example.html', null, null, false);
// 로드 완료 후 콜백 함수를 호출합니다.
$('#target').load('example.html', null, function() {
console.log('로드 완료!');
});
// 로드 실패 시 콜백 함수를 호출합니다.
$('#target').load('example.html', null, null, null, function(xhr, status, error) {
console.log('로드 실패:', error);
});
// 로드할 URL의 HTTP 메서드를 POST로 설정합니다.
$('#target').load('example.html', null, null, null, null, 'POST');
# 소스 코드 분석
`.load()` 함수는 jQuery의 `ajax` 모듈에 의해 구현됩니다. 이 함수는 다음과 같은 과정을 거칩니다.
1. 선택한 HTML 요소를 찾습니다.
2. URL을 파싱하여 HTTP 요청을 생성합니다.
3. HTTP 요청을 전송합니다.
4. 응답을 처리합니다.
5. 로드한 콘텐츠를 HTML 요소에 삽입합니다.
# 소스 코드
#hostingforum.kr
javascript
// jQuery의 ajax 모듈
ajax: function( url, options ) {
// ...
if ( options.data && options.type === "GET" ) {
url = ajaxUtils.addDataToUrl( url, options.data );
}
// ...
return jqXHR;
}
// jQuery의 load 함수
load: function( url, data, callback, type, timeout, complete, xhr, xhrSync, settings ) {
// ...
if ( settings.url ) {
url = settings.url;
}
// ...
return jqXHR;
}
`.load()` 함수는 jQuery의 `ajax` 모듈에 의해 구현된 `ajax` 함수를 호출하여 HTTP 요청을 전송합니다. 로드한 콘텐츠는 jQuery의 `ajax` 모듈에 의해 처리되어 HTML 요소에 삽입됩니다.
댓글목록
등록된 댓글이 없습니다.