[ jQuery ] load() 사용방법 및 예제

웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지 내의 원하는 위치의 내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메서드는 주어진 URL로부터 HTML 데이터를 받아 jQuery 셀력터로 선택된 위에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리합니다.

 

그래서 load() 메소드를 사용하는 방법에 대하여 예제와 함께 알아보려 합니다.

load() 메서드는 비동기 방식으로 특정 위치에 있는 파일의 객체 또는 문서를 불러올 수 있는 AJAX 메서드입니다..

이런 비동기 방식은 당연히 ajax()가 매우 익숙한데 이 메서드의 간소화된 비동기 호출의 단축 메서드로 하는 일은 거의 동일합니다. 

이런 간략한 방식의 메서드는 ajax 외에도 많이 존재합니다.

예를 들어mouseenter(), mouserover() 등의 이벤트를 단축한 hover() 역시 이벤트 단축 메서드 중 하나입니다.

 

 사용방법 

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

Ex) $.load('test.html', {bdn: 'js'}, function() { ... });
      $("#list").load('/test/getTestList.do', $("testInfoVo").serialize(), '');

 

- url : 데이터를 받을 URL을 나타내는 문자열 or 가져올 파일명
- data : 선택적인 인자로 URL로 요청을 보낼 때 같이 보낼 데이터로 자바스크립트 객체 or 문자열
- callback : 요청이 완료되면 호출될 콜백 함수 Function( String responseText, String textStatus, jqXHR jqXHR )

 예제 

test/test-list1-view.jsp에서 test/test-list1-view.jsp를 불러오는 예제입니다.

 

[ jsp ]

test/test-list1-view.jsp

<form:form commandName="testInfoVo" name="testInfoVo" method="post">

...
<div id="testList"></div>

...
</form:form>


<script>
var url = contextPath + '/test/getTestList.do';
$('#testList').load( url, $('#testInfoVo').serialize(), '');
</script>

 

[ Controller ]

@Controller
@RequestMapping(value = "/test")
public class TestController {

..

@requestMapping(value ="/getTestList.do")
public String getTestList(@ModelAttribute("testInfoVo") TestInfoVo Vo, ModelMap model) 
    throws SQLException, RuntimeException, Exception{

...
return "test/test-list2-view.jsp";
}

..
}