[Ajax] JSON 타입의 데이터를 이용하여 PHP 페이지로 데이터 보내기
반응형
아래의 소스는 Ajax를 이용하여 PHP 페이지에 JSON 타입의 데이터를 보내는 소스이다
간단한 예제로 아래의 소스를 응용하여 더 복잡한 기능의 페이지를 제작할 수 있다
[ajax.html 소스]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>Ajax Test</title>
</head>
<body>
<div id="result"></div>
<input type="text" id="msg" />
<input type="button" value="result" id="getResult" />
<script>
$('#getResult').click(function(){
$('#result').html('');
$.ajax({
url: 'result.php',
dataType: 'json',
type: 'POST',
data: {'msg': $('#msg').val()},
success: function(result){
if(result['result']==true){
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>
|
cs |
[result.php 소스]
|
1
2
3
|
<?php
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>
|
cs |
[화면 출력]
위 소스는 input 상자에 데이터를 입력하면 ajax를 이용하여 result.php 페이지로 값을 넘기고 값이 제대로 넘겨지면 입력한 hello ajax 라는 단어를 리턴 받아 화면에 뿌려준다
|
$.ajax({
url: '데이터 보낼 PHP',
dataType: '데이터 타입 (JSON, XML 등)',
type: 'GET or POST',
data: {'변수': '값'},
success: function(result){
완료
}
});
|
cs |
위 소스는 단일 데이터만 보내는걸 알아봤는데.. 여러 데이터를 보내는 방법은 아래와 같다
ajax.html 소으 20라인에 data: {'msg': $('#msg').val()}, 이 부분에서 데이터를 정의하는데 다중 데이터의 경우 {}안에 변수와 값을 ,(콤마)로 구분하여 더 추가하면 된다
data: {'msg': $('#msg').val(), 'msg2': $('#msg2').val(), 'msg3': $('#msg3').val()},
물론 데이터를 입력하는 input 도 존재해야한다
반응형
'Programming > JavaScript & jQuery' 카테고리의 다른 글
| [JavaScript] 뒤로가기 버튼 감지 이벤트 (0) | 2022.10.24 |
|---|---|
| [Javascript] localStorage 배열 형식 저장하기 (0) | 2022.10.24 |
| [jQuery] ajax 크로스 도메인 문제 해결 (0) | 2016.01.28 |
| [jQuery] ajax 를 이용하여 기상청 데이터 가져오기 (크로스도메인 해결) (0) | 2016.01.28 |
| [jQuery] setInterval 함수를 이용한 반복문 (0) | 2016.01.27 |