- $.ajax() 함수는 Ajax 요청을 설정하고 제어할 수 있도록 jQuery에서 제공하는 유틸리티 함수이다.
- $.ajax() 함수를 실핼할 때 옵션으로 URL값을 지정하면 해당 URL서버로 Ajax요청을 한다.
- success 옵션에 지정한 콜백함수(fuction(data))는 요청이 성공했을 때 호출된다.
- 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
- $.ajax() 함수는 서버에서 반환되는 데이터의 형식에 따라 다르게 동작한다.
서버측에서 html데이터를 반환하면 html을 받아와 처리하기 위해서 데이터 타입(dataType) 옵션에 html을 지정한다.
예제
1-1 example
<script type="text/javascript">
$('#menu1').click(function () {
$.ajax({
url:'menu.html', // 서버의 불러올 파일명
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message1').html(data); // 콜백함수로 전달된 data를 id가 message1인 엘리먼트에 설정한다.
}
});
return false;
});
</script>
1-2
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
</body>2 menu.html
<p> menu </p>
<ul>
<li> paste </li>
<li> stake </li>
<li> salad </li>
<li> pizza </li>
</ul>
<p> select menu.</p>1.1과 1.2는 같은 html 파일에 작성한다. 2는 menu.html 파일로 작성하여 예제를 확인해본다.
'Study_web > Ajax' 카테고리의 다른 글
| Ajax(Asynchronous JavaScript and XML) - 예제 2(JSON 이용) (0) | 2021.01.28 |
|---|---|
| Ajax(Asynchronous JavaScript and XML) - (1) 특징, 장단점 (0) | 2021.01.27 |
