# index.html의 body 영역
<body>
<p>내 이름은 <span id="name"></span> 입니다.</p>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.ajax({
url: "test.php",
type: "get",
}).done(function(data){
$('#name').text(data);
});
</script>
</body># test.php
<?php
echo "SJH";
?>
위 index.html에서 사용된 ajax 내용을 자세히 보겠습니다.
| $.ajax() | 데이터를 서버에 POST, GET 방식으로 전송이 가능하며, HTML, XML JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드 |
| $.ajax().done() | HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨 |
| $('#name').text(data) | name이라는 id를 가진 요소를 data라는 인자값으로 하여 문자열로 출력 (html 태그는 전부 제외됨) |
다른 예시로 조금 더 자세히 이해해보도록 하겠습니다.
# index.html 의 body 영역
<body>
<input type="number" id="a">
<input type="number" id="b">
<button onclick="add()">더하기</button>
<p id="result"></p>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function add(){
$.ajax({
url: "calc.php",
type: "get",
data: {
a: $('#a').val(),
b: $('#b').val(),
}
}).done(function(data){
$('#result').text(data);
})
}
</script>
</body># calc.php
<?php
$a = $_GET['a'];
$b = $_GET['b'];
$result = $a + $b;
echo "$result";
?>
첫 칸이 a라는 id의 값, 두 번째 칸이 b라는 id의 값이 됩니다.
더하기 라는 버튼을 클릭하면 add() 함수가 실행됩니다.
add() 함수는 다음과 같이 동작합니다.
a 데이터는 a 라는 id를 가진 form의 값을 가져옵니다.
b 데이터는 b 라는 id를 가진 form의 값을 가져옵니다.
즉, 입력한 값을 가져오게 되며 a, b의 값을 GET 방식으로 calc.php 로 전달합니다.
calc.php의 코드는 GET방식으로 전달받은 a와 b의 데이터를 변수 $a, $b에 담습니다.
그러고 둘이 더한 후 그 값을 echo로 출력합니다.
이 echo로 출력된 결과물이 .done 뒤에 오는 function 함수의 인자값이 됩니다.
즉, data 가 echo로 출력된 결과물이 됩니다.
이 결과물을 result라는 id를 가진 영역에 문자열로 출력합니다.
network 의 결과를 보면 calc.php에 a와 b의 값이 GET방식으로 전송되는 것을 볼 수 있습니다.
# index.html 의 body 부분
<body>
<div class="board">
<p id="result">EPL</p>
<button onclick="next()" class="block-button">다음</button>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
var index=0;
function next(){
$.ajax({
url: "test.php",
type: "get",
data: {index: index++}
}).done(function(data){
data = JSON.parse(data);
$('#result').text('좋아하는 ' + data.b + '은' + data.c + ' 입니다.');
if(index > 1) index = 0;
});
}
</script>
</body><?php
$a = $_GET['index'];
$b = ['Team', 'Player'];
$c = ['Tottenham', 'Son'];
$json = json_encode(array('b' => $b[$a], 'c' => $c[$a]));
echo($json);
?>
다음 이라는 버튼을 클릭할 때 마다 next() 라는 함수가 실행됩니다.
next() 함수는 다음의 기능을 합니다.
클릭 시 index값이 0인 상태로 test.php 에 GET방식으로 전달되고 test.php의 결과물을 done 이후의 함수로 넘깁니다.
여기선 data 라는 파라미터에 그 결과물이 들어가게 됩니다.
data를 json 형식으로 만들고 result라는 id를 가진 영역에 text() 괄호안에 있는 애들을 출력합니다.
b는 [team, player] 가 들어있는 데이터고 c는 [Tottenham, Son] 이 들어있는 데이터입니다.
처음 클릭 시 GET으로 index값이 0이 전달되었으므로 배열데이터의 0번째 값인 Team 과 Tottenham이 결과물로 나와 done의 function의 data 인자값으로 들어가며 json 형식으로 변환시켜 data.b 는 json 형태의 Team 이 되고 data.c는 json 형태의 Tottenham 이 됩니다.