jQuery load 사용법 총정리

1. 기본 사용 + 공통 레이아웃

가장 기본적인 형태다.
공통 header/footer/sidebar를 분리할 때 많이 쓴다.

<div id="header"></div>
<div id="footer"></div>

$(function () {
  $('#header').load('/include/header.html');
  $('#footer').load('/include/footer.html');
});

 

sidebar도 같은 방식이다.

$(function () {
  $('#sidebar').load('/include/sidebar.html');
});

 

여러 공통 슬롯을 한 번에 채울 수도 있다.

$(function () {
  $('.slot-company').load('/partials/company.html');
  $('.slot-contact').load('/partials/contact.html');
});

---

2. 특정 부분만 가져오기

파일 전체가 아니라, 그 안의 특정 요소만 가져올 수 있다.

$('#menu').load('/page/main.html #gnb');

 

이건 /page/main.html 안에서 #gnb만 뽑아서 넣는 거다.

$('#notice').load('/page/info.html .notice-area');

 

class 선택자도 동일하게 된다.

$('#box').load('/sample.html .target');

 

형식은 아래와 같다.

$(selector).load('URL 선택자');

 

URL이랑 선택자 사이에 공백 있어야 한다.

---

3. 탭 / 버튼 / 조건별 동적 교체

페이지 전체 새로고침 없이 일부만 바꿀 때 쓴다.

<button class="tab-btn" data-url="/tabs/intro.html">소개</button>
<button class="tab-btn" data-url="/tabs/faq.html">FAQ</button>
<div id="content"></div>

 

버튼에 URL 넣어두고 클릭하면 바꾼다.

$('.tab-btn').on('click', function () {
  $('#content').load($(this).data('url'));
});

 

버튼별로 직접 나눠도 된다.

$('#btn-about').on('click', function () {
  $('#content').load('/tabs/about.html');
});

$('#btn-contact').on('click', function () {
  $('#content').load('/tabs/contact.html');
});

 

조건에 따라 다르게 불러오는 것도 많이 쓴다.

$(function () {
  const isMobile = window.innerWidth <= 768;
  const url = isMobile ? '/m/header.html' : '/pc/header.html';
  $('#header').load(url);
});

 

언어 분기도 동일하다.

$(function () {
  const lang = 'en';
  $('#content').load('/lang/' + lang + '/intro.html');
});

 

해시 기반으로 바꾸면 간단한 SPA처럼도 쓸 수 있다.

function loadSection() {
  const hash = location.hash || '#intro';

  if (hash === '#intro') {
    $('#content').load('/sections/intro.html');
  } else if (hash === '#faq') {
    $('#content').load('/sections/faq.html');
  }
}

$(function () {
  loadSection();
  $(window).on('hashchange', loadSection);
});

---

4. 서버 파라미터 전달 + 부분 갱신

요청하면서 데이터도 같이 넘길 수 있다.

$('#list').load('/product/list', {
  category: 'book',
  page: 1
});

 

검색이나 조건 조회에도 많이 쓴다.

$('#result').load('/search', {
  keyword: 'java'
});

 

일부 영역만 새로고침할 때도 편하다.

function reloadList() {
  $('#listArea').load('/board/list');
}

 

등록 후 목록만 다시 불러오는 패턴이다.

$('#saveBtn').on('click', function () {
  $.post('/board/save', $('#form').serialize(), function () {
    $('#listArea').load('/board/list');
  });
});

 

모달 상세보기에도 잘 맞는다.

$('.user-btn').on('click', function () {
  const userId = $(this).data('user-id');
  $('#modalBody').load('/user/detail', { userId: userId });
});

---

5. 콜백 + 로드 후 처리 + 이벤트

불러온 뒤 뭔가 해야 하면 콜백 쓴다.

$('#header').load('/include/header.html', function () {
  console.log('로드 완료');
});

 

성공/실패도 확인 가능하다.

$('#header').load('/include/header.html', function (response, status, xhr) {
  if (status === 'success') {
    console.log('성공');
  } else {
    console.log('실패');
  }
});

 

에러 처리도 이렇게 한다.

$('#header').load('/include/header.html', function (response, status, xhr) {
  if (status === 'error') {
    alert('불러오기 실패: ' + xhr.status);
  }
});

 

load로 HTML 넣으면 그 안에 이벤트 다시 걸어야 하는 경우 많다.

$('#content').load('/form.html', function () {
  $('#content .save-btn').on('click', function () {
    alert('저장');
  });
});

 

이럴 땐 위임 이벤트가 더 편하다.

$(document).on('click', '#content .save-btn', function () {
  alert('저장');
});

$('#content').load('/form.html');

---

자주 쓰는 실전 묶음

header/footer:

$(function () {
  $('#header').load('/include/header.html');
  $('#footer').load('/include/footer.html');
});

 

탭:

$('.tab-btn').on('click', function () {
  $('#content').load($(this).data('url'));
});

 

목록 갱신:

function reloadList() {
  $('#listArea').load('/board/list');
}

 

특정 영역만:

$('#menu').load('/page/main.html #gnb');

 

모달:

$('.detail-btn').on('click', function () {
  $('#modalBody').load('/detail/view', {
    id: $(this).data('id')
  });
});

 

 

---

출처

https://api.jquery.com/load/
https://developer.mozilla.org
https://stackoverflow.com/questions/15173606
https://stackoverflow.com/questions/24230609

+ 내 경험