#연관내용 : JavaScript AJAX 호출
■ jQuery Ajax 전송예제
-. jQuery Ajax는 비동기 통신을 구현해 주므로 실무에서 많이 사용한다.
-. 해당 포스팅은 무언가의 설명보다 필자가 자주 사용하는 형태를 정리하기위해 작성되었다.
# jQuery.Ajax( ) 메서드의 옵션
옵션 속성 이름
|
설명
|
자료형
|
async
|
· 동기, 비동기를 지정한다.
|
Boolean
|
complete(jqXHR, textStatus)
|
· Ajax 완료 이벤트 핸들러를 지정한다.
|
Function |
data |
· 요청 매개변수를 지정한다.
|
Object, String
|
error(jqXHR, textStatus, errorThrown)
|
· Ajax 실패 이벤트 핸들러를 지정한다.
|
Function
|
jsonp |
· JSONP 매개 변수 이름을 지정한다.
|
String
|
jsonpCallback |
· JSONP 콜백 함수 이름을 지정한다. |
String, Function
|
success(data, textStatus, jqXHR) |
· Ajax 성공 이벤트 핸들러를 지정한다.
|
Fuction, Array
|
timeout
|
· 만료 시간을 지정한다.
|
Number
|
type
|
· 전송방식 'GET' 또는 'POST'를 지정한다.
|
String
|
url
| · 대상 URL을 지정한다.
| String
|
# 소스코드① - AJAX 형식으로 데이터 전송
ajax_get.php
|
<html>
<head>
<title>:: jQuery Ajax 데이터 전송 ::</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
function ajaxCommunication(mode) {
jQuery.ajax({
url : "./ajax_set.php"
, type : "POST" , async : false
, data : {
mode : mode
, soney : "xperia"
, apple : "iphone"
, google : "pixel"
, microsoft : "surface"
, samsung : "galaxy"
, lg : "optimum"
, xiaomi : "redmi"
}
, success : function(json) {
var obj = JSON.parse(json);
if(obj.ret == "succ") {
jQuery("#smart > tbody").html(obj.tbody);
alert(obj.message);
}
}
});
}
</script>
</head>
<body>
<table id="smart" border="1" width="500px" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
<thead>
<tr>
<th>제조사</th>
<th>브랜드</th>
</tr>
</thead>
<tbody></tbody>
</table>
<br/>
<input type="button" onClick="ajaxCommunication('signal');" value="전송"/>
</body>
</html> |
# 소스코드② - JSON 형태로 데이터를 출력
ajax_set.php
|
<?php
$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");
$backUrl = $_SERVER['HTTP_REFERER'];
switch($_POST['mode']) {
case "signal" :
// $RetVal 라는 배열에 tbody 라는값을 새로 추가한다.
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>소니</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['soney']);
$RetVal['tbody'] .= "</tr>";
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>애플</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['apple']);
$RetVal['tbody'] .= "</tr>";
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>구글</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['google']);
$RetVal['tbody'] .= "</tr>";
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>MS</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['microsoft']);
$RetVal['tbody'] .= "</tr>";
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>삼성</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['samsung']);
$RetVal['tbody'] .= "</tr>";
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>LG</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['lg']);
$RetVal['tbody'] .= "</tr>";
$RetVal['tbody'] .= "<tr>";
$RetVal['tbody'] .= "<td>샤오미</td>";
$RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['xiaomi']);
$RetVal['tbody'] .= "</tr>";
$RetVal['message'] = "제조사별 브랜드를 조회하는데 성공하였습니다.";
$RetVal['ret'] = "succ";
print json_encode($RetVal);
return;
break;
default :
break;
}
header("location:".$backUrl);
?> |
# 출력결과
