select 박스를 선택한 값을 jQuery 로 해서 Ajax 로 전송한 결과값을 다시 받은 코드를 구현해봤다.
이 코드를 보면 Ajax 로 값을 어떻게 전달하고, 결과를 다시 어떻게 받은지 알 수 있다.
ajaxPHP.php 파일에서 ehco 의 결과값을 받는다는 걸 알면 응용하는 것은 쉽다.
form 으로 넘기지 않아도 데이터를 전달하고 결과를 받을 수 있다는 걸 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // html 문서를 다 읽어들인 후
$('#selectID').on('change', function(){
if(this.value !== ""){
var optVal = $(this).find(":selected").val();
//alert(optVal);
$.post('ajaxPHP.php',{optVal:optVal}, function(data) {
alert(data); // data는 ajaxPHP.php 파일에서 ehco 문의 결과 값
});
}
});
});
</script>
<body>
<label>select option: </label>
<select id="selectID">
<option value="">구분</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</body>
</html>
=== ajaxPHP.php ===
<?php
$ajax = $_REQUEST['optVal'];
if($ajax == 1) {
echo '첫번째';
} else if($ajax == 2) {
echo '두번째';
} else if($ajax == 3) {
echo '세번째';
} else if($ajax == 4) {
echo '네번째';
}
?>
테스트 해보고 싶으신 분은 코드를 복사해서 테스트 해보세요. 100% 동작되는 코드입니다.
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [jQuery] PHP 와 자바스크립트(jQuery) 값 전달 이해 (0) | 2016.11.29 |
|---|---|
| [jQuery] 년도와 월(月)을 선택하면 자동으로 마지막일자 변경 (0) | 2016.11.23 |
| [jQuery] option selected 값 읽어오기 (0) | 2016.11.17 |
| [jQuery] 속성값 읽어오기 (0) | 2016.11.12 |
| [jQuery] option selected 속성 변경 (0) | 2016.10.23 |
Link2Me